 Thank you in coming for this small presentation of a little project we have been working on since 2009. First of all, if anybody by accident get offended by things I say, please come and tell me afterwards, and we can figure out what I did. Hi, my name is Morten, also known as Morten DK. DK is normally a language code, though for Denmark that's not true. My language code is for Div Kiva, this is a mission I've been on. So I have one little job out in Copenhagen that does front-end themes and stuff, that's all good. But today here we have three clones of Joel. Joel is also a part of the front-end group. We have Joel here. We have Fabian, Fabian, raise your hand. Fabian has been the brain behind a lot of this stuff we have done all. I've been sitting on a whining to him about what was wrong and he then coded it. And then we have a part of our trick army, if you can raise your hand if you have done anything on trick. You are part of the trick army, thank you for being here. So that's all good. First of all, why do we need a new theme layer? To make the front-enders shut the fuck up. What do I mean about that? Well, here's the thing. This is Drupal 7 and how it works in a simplified way. This is how Drupal 7 was architected to front-enders buy back and develop us. We know what you did. We know you did it by the devil and it was the only two cases all for years. Well, this kind of wonderful, wonderful markup that we had that Drupal gave us out of the box because we all know that we need one markup. The last of you guys just come in and sit on the floor in the middle. You can do that. I will not break on that. So this is kind of the markup we got out of Drupal 7, right? Which can give us a lot of possibilities towards work. Well, the themeers didn't like that. So it was a big, what the fuck is this? Because apparently, Drupal 7 database queries in the theme there is okay, but having the element and the control over the CSS and markup is not. You could say that was a design flaw. Drupal 7 also had this problem about lower high learning curve, especially when you come in from the theme layer. Like, hey, I just want to build a site. I know how to do markup. I know how to do CSS. Boom. Welcome to Drupal. Here's your pre-process where you find that. Thank you, Drupal. I will now hate my life for the next four years. Another issue we have is that we are slow. This is Drupal 7 in 2010. We're in 2014 now. If we begin to implement systems, there was serious talk about implementing 960 grid system inside of Drupal's core. Back in 2009, 2010, there was even a movement, and I know who were behind it, ClipsGC, the North remembers, that this, they're trying to get this in. We even have people who wanted to have bootstrap in. The North still remembers. The thing about this, trying to put these systems inside of Drupal core is that we adapt so slow. When 960 was hot, that was back in 2009, 2010. We're now in 2014 when bootstrap was really, really hot. It's a couple of years ago. Our release cycle is not working that fast. No matter what we put into Drupal core, it's going to be outdated as soon as Drupal core comes out. Basically, Drupal is doing it wrong. We're trying to pretend we're something, but we're not. That's a problem. What we figured out over years of discussing and discussing, was there was two ways of doing this. Three ways? Two ways. Only two ways. We actually did a survey about six months ago, and asked out for what people have an issue, what was wrong in the Drupal system, what they wanted, and so forth. What we ended up with was three different answers. The people who want to have sensible defaults, and that's like having a base class, and stuff that comes out of Drupal that they can rely on, and then you have the people who want to absolute freedom and do whatever they want, and then we had a third group that I think is people who just don't care, and we don't care about them. But the common ways was this. We want to have a theme that's in control. We want to control our market, we want to control our CSS, and if we can get to it, the version of jQuery that would be pre-DAs. So in comes the banana. What is the consensus banana? Well, you will now know. How many here know what the consensus banana is? Not enough. You will all learn that now. Okay, so the consensus banana is the result of many, many years of discussion that ended up at DrupalCon in Austin with about 25 front-end developers discussing yelling, screaming, crying, and with the banana in the hand pointing at each other, figuring out what it is that we want. We actually found consensus. Some would say that finally Morton, me and John Orban sitting right there finally figured out a common way of building their themes without yagging at each other. So here's the basic idea. We have DrupalCon. DrupalCon puts something out. It puts out a bunch of variables that we will call that we can then create stuff on. So we can create markup. We can create CSS on it. That's going to be our sensible default. So you can build seven on that. You can build Bartik on that. That's basically what DrupalCon provides now. But we put it in as a middle layer here in the middle. And why are we doing that? Well, because then when we have Drupal8 coming out, they'll release candidate 2014. We don't know yet when that's going to come out. Let's say it comes out first next year. That would not be so good, right? Does it really have to have the light of day? So another way that some other people want to seem like will do whatever they want to. So they want to just grab the data directly from core. Or let's say you want to build your stuff on a base theme. Or if you do the same, but you don't have to rely on the defaults that Drupal provides anymore. Drupal will provide the tools for you to build your defaults. So you want to build a special class. You can do that. If you want to inherit what Drupal comes with, and so we have a reliable, stable base, we're going to have that. So we're actually going to have best of both worlds. And that means that we're actually going to have a new theme in Drupal 8. Yes. It is called Classy. Classy will provide sensible defaults. And it do, though, require this. Drees commit alert, because Drees has yet not taken taking his finger and pressing the big button that will make the theme world happy forever, ever, ever. This is the issue. If somebody has a phone and want to treat at him at Drees and ask him when he gets this fixed, I would not protest against that. Yeah, well, if you see him in person, just ping and say, well, we want Classy. Get it in. And there's actually reasons for this. Anyway, so back again to this. The idea here is that you have Drupal 8. You have Classy, and then you basically, if you're building on base themes, basically you have the same kind of theme versus the mothership kind of theme. You have something that's completely stripped of everything or have a bunch of sensible classes and structure that you can rely on. That's the two different ways. So how many here knows Twig as a language thingy? Okay, let's just go through it really quick because I'm going to do demos of it. This is a variable. This is a filter for a variable. This is how to get data in. So where Drupal used, was that too fast? Okay, start there. Here's a variable. This is how you print it out. You can then add a filter on it so you can, like, modify on it. This is how we used to print Drupal stuff out. You know, Drupal wears my thing with an und and a zero and you're looking for the data because, you know, we don't want to give the themes too much control of the stuff, right? We need to keep them away a little bit. This is how we're going to do it now. We're going to do, like, you can drill in with a dot between each of them so you can find that data. You want sensible defaults. This is the new translation text. So if you want to translate a whole particle, this is how you do that. You do that with the trunks. Trunks, trunks, trunks. That's funny in German. So you can comment stuff out by adding a hashtag on each of these things instead. You have functional stuff. That's what the percentage sign. So you have an if and an end if. You can do, you can set a new variable inside of a trig template. So you can set through, print out the template that will give you a bomb. Yeah. If, through, end if. So again, we have loops. So if you want to have, if you have an array of data, you can loop through that really easy. We have loop controls at those here. I'm all going to show examples of this. You're going to post the slides different. No, no, I'm going to hide them so only I know this stuff. The slides will come out and yes, I'm also going to show you an example of this. All this is coming up, coming up. Because I have so many demos of code I want to show. So that's why it's like just giving you a view of this. All right. Demo time. I did have the plan about doing this live, live, but I also know by, when I tested it out three days ago and I destroyed my install because we're still not in the real version, that's not going to be fine. So I've actually been doing a little bit of video recording. So let's go through the first one. This is debug. How do you find stuff now in jubilee? Well, here's what jubilee is like. I go in and instead of installing all kinds of things, I'm just going to look at my source. Okay. Where's this coming from? I have no idea, right? No idea at all. Where's this coming from? So what I'm doing, I'm going to go into my sites folder into a folder called services. And there's a thing called trick debugging. And then I go debug, true. Yes. A little bit further down and then we take cache and say false to that. And then I go back to my site. I go compute, back to site. Back to yes. So what I'm doing here is I'm going over to our performance and I am, of course, clearing the cache because we still have to do that over and over again. It's a bug, we're working on. So you don't have to do that every time. You will see a lot of times I do a clear cache from this demo. So what happens here? Can you see the green stuff? Can you see that all the way down? Now you can. All right. What is this? Oh, shit. No, it explains to me where stuff comes from. What is that? Okay, let's look at this. Final name suggestions. This is the final names that you can overwrite this part of the template with. You don't know where that template's come from. Boom. Call modules, no templates, no HTML trick. This is how you figure out where stuff comes from in Google. So that thing where you sit and hate life for a week because you can't figure out where stuff comes from or like hunt down people on a seat just to figure out where it's coming from those days are now over. It's site default services. I don't know why it's there and I don't care. I just know where to put it in. Don't put it in production, of course. By the way, there's an issue for Google 7 and David, the maintainer for Google 7 agreed it can go in. So we will at least put templates in Google 7 and have the same debug output. So if you find it, how do we see it or put your plus one on it to get it in? It's a Google 8 after the hour. Of course, don't think we should put things back. So we force people to go up to Google 8. That's a whole nother thing. That was a joke brunch. Okay, let's install a new theme. I have a theme here called yuktrasil and you can already see how majestic it is, right? And it looks good. It looks good. So, how do we install a new theme? Well, here's my theme. Install as people. Okay, fair enough. What is in the theme? It's my yuktrasil. Yuktrasil is a big badass tree if you're up here from the Scandinavian parts and you know that. I have, as you can see, this looks pretty much like what we used to do. The conflict file up there we're going to talk about later on. But let's first look at our info file. So I have my name definitions as usual. I have my style sheets. I have libraries. This library points to yuktrasil base. So as you can see here on the next template, the base here is I have a version for it and then I have my JavaScript data there and when a bit too quick, I'm going to go back to it, I also had a little bit of jQuery and that is going to be really sweet later on. And I have a very big style sheet for my new theme. All right. So what can we do with that stuff? Well, here's my new theme. It looks pretty majestic, right? This is Drupal 7.8 in all its glory. This is more to show you how you can do one of the things I really like to do. Removing stuff. So here's all the crap that Drupal thinks it should put out to me. I don't need these style sheets because, as you can see, I only need one little piece of style. Style sheet remove is a new command we have now from my info file where we can ask Drupal to say, hey, remove these CSS files permanently. So we don't have to use that FOAD technique we used to do with a caller. A CSS file that doesn't exist. So Drupal is dumb and forgets about it. You can actually just remove them. So in this case, I'm going to end up only having my own CSS file and the last one. Oh, yeah. So here we have another comment here we have another comment one, jQuery. I don't want to have jQuery up my output because I'm going to add a new version of it or just don't want to look at it. So I comment that stuff out of my library. I reload my page and boom, only my JavaScript file is there. That is how you basically manipulate the overall external files you put in and that's how you actually exchange your jQuery version if you don't think Drupal 8 is fast enough in that piece. So basically, style sheet remove is a way to command and tell us this is the CSS files I don't want to have. If you want to remove our add-in libraries, JavaScript libraries, you put that in your in the info, in the dependencies, and this is, by the way, you can go and sort to that. All right. Variables. How do you look at a variable in this thing? Well, let's look at that. So I want to figure out how I can play around with my notes and I want to speak things up. So, we'll get that stuff in. First, we have to install just develop, the develop module, and also here I'm using just to do that. I'm going to enable Kint. Kint is the, it's like Kumo, but just for Drupal 8. I don't know why it's changed and I have somebody who's no stuff, X and no that, but Kint is like the new way we're going to do this. So what I'm going to do here is I'm taking a variable, say Kint on it as a function and I then add it just to come out of the content so I can see, okay, what's actually inside of my content variable? Josh CNR is Josh... Cache Rebuild. Cache Rebuild. Cache Rebuild. Yeah, it's the new CC. Instead of Cache, it's... Okay. So, here I get all the different data directly out of here. So I can see I have my field tax, I have an image, I have a body and even draw further down to it and that way I'm going to begin to see what I can do with these variables. And I can even go in and, as you see here, okay, what is in my tax? Because we're going to do some fun stuff with our tax in a minute. Again, I clear my cache. I reload. Here we go. And here's all the beautiful data that comes out. What happened there with my screen? That comes out of our tax. So this is basically how you inspect whatever is in your site. That's all good and fine. So, I have a template and I want to do overwrite that. I want to move stuff around. I don't want to do that with display suite or context or all kinds of things. I want to control it directly from my templates. So to do that, and this is now going to be really fun, is... You just want to play by itself? No. Here we go. Let's say I want to move the text that's placed down here. I want to move them over in a column for itself on the left. And I'm going to have my images and all that stuff over on the right instead. So I have two disks. You can see left and right. This is really bad stuff. What I'm doing first, I'm taking the content variable and I say, okay, print this without the field text. So basically, it's going to prompt everything that's in the content but without the content of field text. Again, I clear my cache and we go over and see what that brings us. That was not like sexy and hot but now it's really going to be fun. So how do we overwrite that? Well, as you saw earlier, I'll just do the debugging. I'm going to go out and figure out where does this come from. Just to bring my source code. I have it here. This is where the fields come from. Core module system templates field. It's a long way from home. So I'm going to find that. Oh, I cheated from home. I've already done it. Isn't that how you don't do it? Like in a ship ship? We then take that template. Come on. And then we figure out what name to actually give it. So we overwrite it to the right place. So, see here. As you can see, it has a little style of each but it has an X down the bottom. The X is the active template. So when you open up your source, you look into your template and look into the source like, what is actually active here? You can see that on the X. So you always have an idea of it. Let's see if I can get control of this template and this is what's loaded in. So I gave it that wrong node. No field node. Ya, ya, ya. You can see here. We now have control of this stuff. Of course this is good. And it now tells me that this file is now built from my templates and it's not built from Google Core anymore. All right. So next up in this is of course I'm going to say this markup and create something I want to do by myself because that's what we do in the front end. We always have different things we want to change out. So I start up by just stripping things off as I see them. This thing, I really need them. See here. Move, move, move. I'm going to say, I think my text should be in a section instead. So by having it in a section and what I'm going to do as well just to see here that I'm actually not cheating. This is live code. So the next thing is to give them a little bit of classes that I know I'm going to use. And then I'm going to do these loops. So I'm going to say, okay, if you're in the first loop, then do this. Else, if you're in the last loop, do this. If you are index number two, you're going to do some special as well for you. Then I'm going to take the item. The item is the thing that's going to be spit out the data. And I'm just going to add a class to all of them. The last else command down here. If I can find it. This one is like the default. I speeded it up a little bit because it took forever to set it right. Also it looks like I'm really pro and know what I'm doing right. Let's face it, when you can record stuff, you can kind of stop and check out the syntax so when you break your site forward time, I'm not going to show you that. Anyways, here we go. Here's the new markup that I created. And look, Drupal didn't explode by not having 6,000 little elements in it. So I have a little bit of an italic class down here and I have some colors that I want to use. So I'm going to add them in different places just for the fun of it. So on my second number of tags coming up, I want to add that italic class. Let's see if that actually happens as well. So the blue should be holy shit. And guys, it's our own little class, customized by me, the class name I wanted to get in here. So let's do something that's maybe a little bit dumb, but also fun. So we saw all these things called different color names and I had these color names in. So what we're doing is we're drilling in, this is another way you can drill into Drupal Core, into Trig. We really don't, hopefully Dural says that we're going to have this fixed when we release. So what I'm doing here is I'm taking the item and I'm dragging it out only in the title. This is not as elegant as it could be. I know I said that it had dot notations. This is one of the things because the way Drupal 7 was built, we can't do it at this moment. We're trying to figure out how to do that. And here we have it. In class names. So, that's what CSS files are. Here's another thing. Let's see. So I'll open my loop first. I want to do more fun stuff. And I want to figure out if it's single or pure. And I just want to write that out directly. And I kind of don't want to write a preprocess function that does the counting. Because it kind of thinks it's a little bit dumb to do that if it's just a front-end. So I'm testing here in the loop. They say, hey, if you have more than one loop inside of you, more than one loop, you attack those UR tags. And here we see how clever I am. I'm going to test them on the index. Not on the counter. As we can see here, nothing comes out. I go back and I adjust my mistakes. Of course, the loop thing. How many times have we looped through this stuff? Let's see what does it give us. Come on, we'll do the stuff. I cut this off to work. It always happens. Yeah. Now you clap. I've just shown you how we whip through everything. And you made a mistake. Goddamn it. That's fine. Anyways, that was the principle how to use a loop directly inside your template. One little word of warning. If you're using user data as a class, you should use dash escape and then html atro because users might be doing nasty things because the outer escape the trick has does not work for classes because you need to have a scaling strategy for that. Yes. Another thing you saw before, I just ripped out one element out of the whole content. Let's look at how that looks when you want to do that more time. Here's my field tags. This is a content without, and then you just have those field tags. Then by comma separating it, you can then begin to split up multiples of them. I'm going to remove field tags and comments and the field image. I'm going to remove them from my content so that we'll never print it out. I just want to separate them out and of course print them out another place. We do that just by doing content dot and then the name of that field. So here I want to put out my comments and tell it and let's go over and how should we move the links as well? Yes, we are removing the links and let's see what that does. Oh, but the one that's the one that's the one you do. So this is actually basically just how you rebuild and you modify and you move stuff around in Drupal 8. I do think this is pretty hard to be honest, but it's not as hard as this. Tweet blocks. So in Drupal we have a block and in Tweet we also have a block because confusion would be good. Anyways, the Tweet block is a part of a template that you can modify on. So let's say we have the front page of our site. We want to change that front page. We want to change just an element of that. That needs another header thing that says welcome to my page and I don't want to do that with blocks and configure all that stuff on how to fix that. No, I just want to do it in my template so we do it like this. So I'm going to put a block in here and what we're going to do, I'm going to do a defined block first. I'm going to give it a suitable name for this session. And it's called modern decaying is awesome. That is my block. And my block is going to have a div in with it. I know I'm the div killer, but this is kind of the just to show you more how stuff can look. I'll give it a green class and text to it. Hi, I'm Tweet block and I'm here to block. So as you can see here we do a block and an in block and that name we're going to use in a second. So what it does do here is like it just got to print itself out. We have not yet told the trick system that you need to do something with this. So the way you do that is you look at the place that puts all of this data out that's my page and then see okay, which of these templates do I want to use to do this? I have the page node, I have the page front or the page email. Which of these places do I want to overwrite this part of my site? So I go over here and I just copy my for my page HTML trick I'll copy my new block I'm now on page front HTML copy that block out then I do the magic of extents and this is the second I couldn't remember the exact syntax so achieve a little bit there we go extents, not extents themes so I'm pointing to my theme folder which is my theme spot I have the templates in page HTML saying okay, this file when you hit page HTML trick and you have called to page dash dash front at that point exchange this part of the template so let's reload the page and see what happens I'm now on the front page let's see what happens when I go into another place it's green now this is how you extend all of your templates so you can begin to have really begin to crack your themes up just one little note on that you put in the full path there and you can do that but we have, I'm pretty sure right now I'm going to have to test this out just to make sure that we actually have this working but you should be able to put the path relative to the place you are so you have all your templates here page HTML trick and then you also have your page front HTML trick in the same folder and you can also reference other base themes with this add symbol whatever the name of the base theme is and then that name, the variable so there's a number of ways that trick will look through the file system to find the right template and yeah, we have that in there I just have to test to make sure it actually works again yeah, we extended it that where trick is only looking at the file system and it will pass that it's a little more groupily you can reference base systems your own system etc and the reason I did this was actually because it wasn't working and I felt like an idiot it was a couple of weeks ago that's a couple of times so here's a really sexy thing add and remove classes from a node from a template, what does that mean well this is part of the banana consensus that we want to be able from our template to control everything that comes out and give us the class name from jubu so the jubu system will give us different variables that we can work with and then set a template we can add classes and remove classes from our trick file so how do we do that here's my node and when I expect this, when I look through it and say okay, I have all of these classes and we all know that of course I don't need them because what would I need them for so I want to change them to something specific I don't want to call it a node type anymore I don't want to call it a content type because that's how I normally say it I don't want to get confused about it this is not hardcovered anymore and you see this what do you call that sign tilde so tilde is just a content type and add then the node function which is the name of the content type and then this clean class so we're going to take that part that's variable that jubu will send us and we can then add it in let's reload the page and see what happens here boom, I have now overwritten and controlled jubu's classes jubu has no more control of what my classes is anymore that I do think is pretty goddamn sexy and here's the thing, you can still you can still do all these things you can still just have it as jubu puts it out but I can control it as I want to no matter where I am what kind of class that comes out of jubu that we have a method to go and replace so what I want to do here is I'm just going to test on my node if my node is placed on the front page what I want to do, I want to give them a specific class and if it's not on the front page I want to give it another class, common example so what I'm doing here is saying okay ish front, that's all variable and I do a question mark which is again and if it's front then do ish front then the tolerance and then not front and here by the way you're going to see a beautiful error I removed the rest of this data because we don't need it right now though, screw that and let's just see if we can add a front class on it can my cache again, go back kill my kink because we don't want to reload that so not front and we'll comment that through and look at this this is now, we're not on the front what do we think that happens when I go to the home page? anybody? John? can you guess and there we go ish front so we can now control our classes from the template layer, directly without Drupal doing anything in a pre-process anything from a module and let's say there's a module that adds a class like highmorton, I hate you class which I'm pretty sure Drupal does regularly, I can then go and detect that class and remove that crap the reason for that is, let's say you have you are working on a CSS bootstrap foundation or whatever kind of CSS frame you're working with that has a class name that Drupal also uses then you're going to have a conflict you don't want to have that, then your theme can go and you can remove that stuff or you can change that stuff and then you don't have to have different themes and CSS frameworks to battle with each other just to that same point there's some people working right now to separate the classes that are actually used for JavaScript from the classes that are used for presentation, so the classes that are used for JavaScript are turning into data attributes hopefully, we're working on that right now but that allows you to know like, oh I can remove this class and it won't affect my JavaScript it's just blowing up and so we're trying to make it a giant solution and if you're a developer and you get really freaked out like hey, my module should add a class because I need that because something, something, something well, here's how I do that we still have the add class we still have the classes you can add in that array is object, whatever, that thing, the class object is still there so you can still add stuff to it just from the theme layer we can we can work with that so from a module developer's perspective you have the freedom to do what you want and from the theme layer we also have the freedom to do the what you want so that whole thing of us clashing and not figuring out what classes and stuff we want to have in is because of the banana that's why we love the banana okay here's the thing, how many here loves to do menu theming John Olben is the only one who put his arm on, by the way, everything around that's wrong with Google 7's theme layer is John's fault because he was the only themer who actually worked on it at that point and that means we can have a silent play into him thank you John for your wonderful work on Google 7 some of the things that we got in about last week and this is the reason I have to trash all of my own slides because this is so goddamn sexy, you won't believe it let's look at this, so I want a theme a menu and this would normally make you hate life for weeks, right so I go up and I look at my menu and say, okay, what is going on here let's see come on, yes, here we go so here's my menu and I go up from here it's a theme menu and I have only two template files, could this be could this be, we only have one template file for a menu that has everything in it this is a leading question anybody, okay, so we open up the menu template, let's see what's actually in there I put that over I'm going to throw it on my theme entry for sale I do nice little folder called templates and I drop it down in here, so I don't want to overwrite all of my menus, I only want to overwrite one menu, that's the main menu, right that's the only one I want to touch so here we have menu dash dash main, you can see the pattern system if you're talking about anything god damn it so the stage is falling apart because apparently this is too hard for it to handle so anyways, so here's my menu template, I have this one menu template I rename it to menu menu menu dash dash main to overwrite it and this is my evil laughter when I was coding to figure out if this actually worked this has been a thing we have been working on talking about for years for two years by since jubiconic unity I just want to do something with it let's go down to the end this is a macro we call we're not going to talk about macros right now but we'll do that later on so what I'm going to do here is I'm going to say if you have the menu level zero, I'm going to add in a specific class for that and it would be really awesome if I could add in a class for each level without having to call four different pre-tourses and figure out where to put this data I have all of my data right here so we're using again the attributes add class so if I'm on the menu level one I want to add this class if I'm on any of the other levels what I want to do, I just want to tell jubil, tell my CSS which level I'm on so I could do a menu menu dash dash level dash so you're just pumping in my up here we have menu level that comes in so that's what we're used to that and then we're going to save we build cache again it's getting kind of tedious to do that we build cache I think like my left hand had like have that in just going to say in the future just go on okay here we go menu level one how many hours in pre-tourses take to do it back in good old days another thing I want to do here I'm going to add another class as well menu level root to level one so I know this is my level one so I can always go directly in this also reference by the way to talk John is going to do later on we're talking about this also about how we have defined our new CSS documentation that we have if we have time for it I can point to that I took the demo files first because I had no idea it would take a long time alright let's clear the cache again let's see what happens so I found I figured out why putting this leaf on is always a thing I've been hating in Google like this leaf, see we can actually remove that as well you can see it's floating around let's go out there and fold stuff out holy crap is this actually how do we look let's kill a little bit more classes just for fun because that's kind of a thing I like to do to be able to customize normal things all the way down I think we figured out that we might have to figure out a way to detect if a module or your template has classes inside of them but that's going to be a thing we're going to work on later on but now we have a menu that I have defined exactly as I wanted with the classes yeah should we kill class as well this is my menu out of Google one menu one template file and I can do with it if I want is it now we clap so for example number two in the way of a theme on the same note the winner worked really hard to get that in there and I was probably my favorite template in there because I remember trying to use theme tree theme menu tree does not have any context with many variables it has a UL and the class menu and you can maybe do that as much as you can do with that theme this now allows you that level thing is almost impossible to do in Drupal 7 it's not totally impossible but it's almost impossible and that makes your menu is a lot more flexible in what you can do with them so I'm just going to give a handout to the winner and all the other people who worked on that this is not an issue problem we talked about this since GoogleCon in Munich there are two years of discussing how to make this work here's another whole example the pager besides of John who likes to theme a pager okay if I say to you a pager is now 67 lines of template code you can do with it what you want oh yeah exactly so let's look at that here I have my pager and it puts out this by the way we have so it's all pretty it's all good out of the box but let's say I want to do something specific to it so I yet again I do my whole copy of the template re-naming it here just kind of overwrite all the pages in the world what I'm going to do with all the pages I'm going to remove that url because I want to do it with span tags because that's just how I'm going to have my markup today so let's say all the elitics remove them there there we go close them as well yes we should have them all now that's pure cache oh yeah let's say the pager item in it let's do the green class just so you can see I'm actually not faking this and if you look at that again that's your pager that's our future of the pager it looks like this I'm going to have my markup as I want to detect what I want to and I can work with it and this is the markup I want to move these classes if I want to use span tags all over it if I want to do something completely different you have all that in I actually wanted to give a shout out to Lauri who is sitting right in front of here and looping for kicking ass on this subject it has been a pain in the faking ass for years to do pages it was kind of the most hatred thing I could get I've got damn it it's going to take me 40 to 60 hours and people are going to think I'm a bigger moron than I used to be now I actually have direct control of this file and there's even little comments inside that say if the eclipse is next if I want to do something else then having three dots I want to have a little emoji icon there I just put it in that is a piece of beauty alright so this is just the basic thing here's another thing when I move my theme I have to get all of my image styles with me have to reinstall them I do it normally in a feature I move them over to Google 7 and then something breaks and I hate my life here's a sweet thing about CMI that I was not aware of until a couple of months ago when I was like I wonder if I can install an image style directly with my theme so here's a Google 8 body version and it has an image in it and just to show you I'm not cheating I don't have any styles I don't have any styles at all this is all Google basic what I want to do I want to install an image style with my theme how do we do that well up here we have in the config I have an image style my image style is called Odin because Odin is badass and this is a file that you can work with so let's see here here's my official theme let's go down and look at my image styles oh shit I installed an image style directly with my theme so now when you pack your themes you can actually move your image styles around yes that can see the light of day so now as we load this here's my here's my Odin style let's say I want to go in and modify I don't want to exaggerate anymore I'm just going to delete that no reason to have that anyway so what I want to do now is I want to make sure next time I install my theme I'm actually going to update my image styles so my image style now looks there's just resized it to a thousand times something something I now can export them and go up to the image styles and I go down and I find image settings and somehow it gave me a false let's try that again absolutely yes here we go here's my code so this is the configuration code that you will bring in and the image style Odin demo file so I cover the stuff over and I paste it in I removed the UID on it so you don't end up having issues with one side it's not belong to another side it caused me a pain in the ass for a long time so just to show you off I'm installing the image style to delete that when people are showing videos of this I wasn't pretty sure that they're totally cheating on that just like there's little animations in there but it's actually not so now I don't have my constant anymore alright so we installed the re-consulting again just to see if my image styles actually changed this time let's see actually we don't have the page of the code to see them let's change my image style back to Odin which I've updated just before I'm going to save save it go to the page voila you can now import and export image styles with your theme you can actually do a lot of things here you can change field settings and stuff you shouldn't but there is possibilities here that we just only trust in the layer so that's a new wonderful little thing besides of that we have a chart of new shiny things how much time will that last 5 minutes so here's the thing you saw that the theme boom is that we have now added logic so you can put your themes into the themes folder in your core site I know it's crazy you don't have to look like the new kid anymore so that's where it belongs I have sad news for you if you are into i6 i7 or i8 we're going to go straight up html5 we just used another little detail that I used 9 months of my life on and added kind of threatened people even in the issue queue IDs a note with an ID on is no more this is how an article looks now if you really want to have your article have an ID on this is how you put it in so those 5 people in the world want to have an ID on their note to select because that's the theme we're going to use we removed almost every god damn ID we could find yes here's another little one you all know the form that has that diff inside of it that we really need it is gone this is my first patch ever 6 years ago I got it out thank you html5 documentation for css how jubilee should be written as css we actually sat down and talked about that which methods do we want to use we're going to use smacks and we're going to use some bin naming john who's sitting right here is doing a session later when tomorrow three talk man a lot about this as well and he's been like the lead on that so we actually have a decent naming convention js prefix so if you have a class that javascript puts out because you need it then jubilee is now going to prefix that with js so you never again when you kill all the classes from use make sure that the atax call doesn't work anymore because there's actually a place that says hey js don't remove that what not though is saying that you should use data attributes instead this is also known as the theme of don't fuck this class up but using data instead that makes it secure the logo is no more logo oh yeah we got a new theme engine theme functions are dead I am so sorry for that we have templates instead we actually have a lot of templates so developers who's trying for that I will you can try in a big cup and I'm going to brew coffee on that and enjoy it each morning template files instead of functions it's a big thing as in jubilee 7 we have 55 templates going on 154 different functions in jubilee 8 right now we have 21 functions we are hopefully going to have several theme functions when we go to release candidate 1 and at this point we have 149 templates at last count we're trying to minimize these but that's so 0 functions and 0 templates in jubilee 9 alright so normally you will do that the question thing what I'm doing right now is a quick FAQ of questions that we got over the last couple of years the first one is sass in jubilee 8 I know that 90% of us use sass no we're not going to have sass down in jubilee core as you saw first how you can remove your CSS file and then do what you want so that's just how it's going to be 7 in jubilee 8 why is it not called 8 here's the thing 7 is a name it's actually a string it's not a number you don't rename your kids 1, 2 and 3 right so that's why it's called 7 okay headless drupal trick holy crap we get more buzzwords into one sentence if you're doing headless drupal you kind of figure it out yourself what if I really want to use psp template or you can still do that you can set the d-menion to psp template you can then rewrite all of the templates and the functions and the add-remove class and all the other stuff and then figure it out so have fun I don't know why we pat it in here's the thing I've accused John for epic fail in the jubilee 7 for years he was actually just trying to like not make it suck a lot if it fails and I got this question a lot of times if this fails more and now you've been yelling about this for 5 years and been trying to put this forward is it your fault? yes it is and I will take full responsibility for that bootstrap and call nope that's not going to happen there's an issue for this that has a lot of frontenders going really apeshit so no that's not going to happen that's actually the whole idea why we're going to do this banana principle by being able to add in what we want and what we need to we'll call backport to jubilee 7 have fun with that we're not going to do that drag and drop UI so you saw that whole thing while I was like moving stuff around well in contrib we're probably going to have to create some kind of module that actually takes if you have overwritten everything because there is some UI controller cell in jubilee 8 one of the discussions we had way back was how do we want to have everything controlled by a template or should everything be controlled from a UI besides of one person two years ago in a room of this size when we asked that question there was one person in that room that wanted to have that UI because he was most likely a dude who was uncomfortable by working directly in the templates that was the only time we have heard from a frontend perspective that anybody wanted the UI so that's one of the decisions that we're trying to push everything into templates another thing I heard that's a question I got from one person yesterday was like it's Scandinavians or themas the loudest so I just kind of want to figure that out so can I get a sound from the themas okay can I get a sound from the Scandinavians even John I'm sweet as blood that's why we had that much beef alright so the hashtag jubilee 8 here's the thing if you think that what we have done so far is pretty awesome or it's pretty much failing and you don't want to help out and you do want to help out because we have a long road start so we are far deep down where we want to be and actually we're further down than I thought we'll be hashtag jubilee 8 we use that on Twitter to like announce stuff but it's also the ISC channel that we're using and it's kind of the place to do all that stuff the reason we don't just call it trick is first of all it's impossible on Twitter to use trick just as a word and it's all not to be confused with the trick projects another thing tonight my friends we drink why do we drink because we only have one goddamn menu today we only have one pager we can actually control our class names now we can override everything jubilee puts up we can detect on it, we can taste on it that is a piece of beauty and that demands for celebration I do know that we have also a bar called tonight so being as insightful as I am I have pointed to one of the bars they're called as it's called and it is at tonight at 7 o'clock so come and hang out with us three beautiful people, hopefully also our trick army up front here and talk with us and figure out what else we're going to do with it and yes it's going to end up being a part also of our pub call we know that at the same time there's also the women in jubilee meet up and just kind of collapse that's why I'm pretty much going to stay there more or less all night if you want to yell or removing all team functions you can do that there or you can buy two other drinks for doing ad mood class the pub is placed here and that's you can also if you have that little the little map it's also on there, it's like one of the official jubilee bars that we're going to use right after this during lunch and I know it's like god damn, I need some food we're going to do a bar down in G11 and try to like plan further out what we're going to do, what we're going to do for the rest of this jubilee con because we're going to keep coding on it even more importantly on Friday at the coach bench even if you have no experience of what sort of job I do in a coach bench like what am I going to do here the thing is that we're trying to make the template system work in a way so you as a front-ender with no god damn knowledge of jubilee at all can work directly in it so as a developer company if you just have a deaf dude who had to do jubilee stuff but you just want to have the front-end be pretty you can begin to work with that directly as a front-ender and this is one of the things that I see that's going to be this is by the way, this is the key to having jubilee 8 and why we're going to have a shit ton of new people coming to it because you're not going to get a hammer in the head the first time you're going as a jubilee front-ender and you're like, hey, I just want to change this you can now find stuff, you can edit stuff you can modify it and that's pretty god damn awesome that bar is all the way down here at the end so I would suggest as soon as we've done talking here and there's those questions grab lunch, come down there and we're going to make a plan for everything jubilee trick is the hashtag and that's all in the project by the way, front-end united is going to be in Brussels 18th to 19th of April next year the group behind front-end united just decided that because that's how we do that stuff so now I know where to come there and with that thank you all for coming any questions please come up with them sure