 All right, I'm fully aware that I am the only thing that stands between you guys and Drinks it later on That's not so much the problem actually the biggest problem is I have all of you guys Standing way of my drink later on so it will start actually on time for the first time ever So if you will just keep pouring in that's awesome But yeah, if somebody want to close down the door down there say we're gonna go now that would be sweet And I'm gonna start up if I can find my presenter thingy I can so This is This is me more than DK I want a small little shop in Copenhagen called geek way out besides of that I had done a lot of work for tag one called insulting which is actually a bunch of back-end developers They have no clue of what I'm actually doing, which is good because they just pushing all my commits I have a column in the Jubilee watchdog magazine. That's called the angry themeer I have a tendency to yell a little bit about people and I've heard now Multiple times that I'm apparently is the boogeyman in the developer world and it's right I am hiding under your bed and I will come after you if you put too much markup into your module Besides of that. I am also the classy Maintainer which is a new theme for jubilee and that with Dave Hernandez. He could not be here today He is in a back home in the US This is my Twitter handle. You can yell at me there if you have commented stuff do that or use Google trick So, um, so let's go back to this morning. You know, we saw this slide No, thank you trees. Thank you for calling us out for being the one who left But you know as always from front and United that I've been fronting For many many years. It's time to stand up and we will do that So, um, how about we open up the session by getting that boo and anger out? Let me hear that Was that it that was the only booing okay fair enough, but you know, we're very sorry for that Yeah, right, but no come to the sprints on Friday We're gonna get that fixed getting that shit punched in and and getting us you want getting out So I'm gonna start with talk about one of my favorite topics, which is Stockholm syndrome Stockholm syndrome is nothing to do with the Swedish chef or IKEA Stockholm syndrome is what happens to people who have been captured for a long time and suddenly begin to sympathize with Prison guards. So this is Drupal 7 markup and I've heard the argument that you know Divide is it's a feature. I've heard that from front-enders. It's a feature. It's good I have all these classes all this diff so I can pinpoint everything in it is perfectly Okay with 5,000 lines of code in your pxp template file. You know the class soup is another feature That is all parts of Stockholm syndrome and I'm here to drag us all out of it So let's just go like no more of that stuff. How no more of that stuff. Well, we're gonna go this jubilee So what are we done? Well, we've introduced a new theme engine. So hello trick, you know, and goodbye pxp template Because basically what we've done is we've killed the theme functions and and now everything is turning out to be a Template and by a template, I mean there's gonna be a lot of templates But basically what we're doing is we're taking the control of markup and CSS Ripping that out of modules and putting it to the theme where it should live So the files and the file structure you live in and working on a day-to-day basis That's where it's gonna be at. That's the whole point of it So I have one little exercise we need to do now. We need to unlearn pxp template Are we ready for that? Can I get you all to close your eyes? I Can see you guys come close them so we now think about all the awesome stuff you have done in pxp template Yeah, I know it's hard to figure out anything. It's kind of like completely empty. Okay, open the eyes again Thank you guys. So now you're ready for this. This is trick Everything you have used to do you don't you're not gonna do that anymore when you come up to jubilee It's all gonna be gone. So trick is a modern template language yaddy yaddy yaddy yaddy yaddy all this Infantry stuff built for the symphony guys and so forth. So and it's easy to learn how easy well this easy First line up there. That's a variable. It's gonna print out your variable The second line is gonna be stuff that's coming it out and the third one with the Is where you put functionality in that's what you need to know. You know no trick. Hooray The other thing you're gonna do with that is your variable drilling How do you get your variable wall in triple seven you can see the upper line there That's how you kind of got you had to remember when was there a zero when was there the und the undefined language not the Music rhythm from from Germany. Oh We have removed that and now you drill into a just with a dot So you can actually go find your data without you know sacrificing a little child in the moonshine The other thing we have now is we have functions functions that you can put up on top of your your variables So you have a variable you put in a pipe and you ask it to do something here's like make it pretty and do it now You could also be a function like uppercase this way This is how I make my name uppercase a pipe and uppercase translate have changed a lot Translate used to be we can now do that as a function with a with a pipe T all you can actually use the trans Function and you wrap your whole string in that so you can put variables and everything in there and just print it all out And Drupal takes care of the rest that is kind of one of the things where we usually do a lot of mistakes in Drupal 7 Because it's such a pain in the ass Controls function would be like you know if the person is somebody and do something about that that would be that That auto escape thing. It's something with security. I don't know what we're gonna use that for but you know If you if you really need to have your data raw out you can use a pipe raw and you can get it out that way There boo. Yeah, don't do that So the other thing you can do is inside of the template we can create variables So we have variables that comes in but you can create your own variables that you need them We're gonna see later on when we begin to play with the classes and CSS how we can do that So basically you define a variable and you do a set here I set my variable foo and I get the variable bar and then I'm gonna print that out And that's it. That's all you kind of actually need to know about trick basically to get everything to work The biggest issue we had got in was actually the new theme classy because we have separated all the markup out of Drupal core and into a theme that's kind of been one of the the biggest change So in Drupal 7 it went something like this, you know, you have You know all the markup gets created directly from Drupal core and it got pushed out to a theme And then you can try to work with it What we're doing now instead is we're piping that all of the commands for all the variables Piping them through a theme classy and then we put out all the all the markup all the classes all the CSS It's going that way instead So that means that now you're actually gonna use a base theme and forget about what you know about base themes in Drupal 7 Because it's not it's not the same thing anymore You have a variable we send that to you to a base theme Which is classy and that Daniel 7 and Stark will inherit from that and then work on it So all our basic markup is actually now living in classy So the markup that you want to use just out of the box because you don't want to write any templates That's where you're gonna do that. Um, so if you have your own theme, you need to kind of decide what do I want to do? Are you kind of a nerdy front-ender like me who want to decide everything and change everything on the go? Well, then you just don't define in the base theme If you want to have Drupal basic markup and class names and stuff you can actually use to develop on Well, then you're gonna use classy because that is Drupal's basic themes And that's what to know about there. So, you know, no base theme defined You're gonna get an empty diff and that's it and that is by this by design It is still my favorite issue when we cleaned up the menu and somebody whined about there was no menu class And they're kind of like it's a feature The thing is the other thing you're gonna be really Maybe gonna be a little bit tired of so in two years when we have you know 6,000 template files in every theme somebody's gonna come and yell at lorry for designing this the theme system And why is there so many template files? That is how it's built. I'm sorry for that already. I'm just gonna put it out there. So The thing is that you need to define your base theme and just remember that always if you don't define anything You're not gonna get anything that is by default. That is how we have designed Drupal Drupal should not put anything out unless you asked it to so when you say, hey, I'm gonna use classy I'm actually gonna use that. Um, there's been one question people could not figure out how come I'm the maintainer of the classy theme Because if you know anything about jubal, you have jubal 7 you have to send and I did a theme called the mothership Which is pretty much a flaming fire hose through the jubal theme system and cleaning everything up and you know in jubal 7 We have classy which is kind of the same thing as send and we have jubal core Which kind of have nothing in it and how come that, you know I'm the maintainer of the mothership But I'm also maintaining classy and john all been Who is the maintainer of sin which have all the classes in he's maintainer of stark which is basically course marker Well, I don't know why that happened, but it kind of happened and you know submit a patch if you don't like it This is actually the amount of maintainers we have now this is a big change from jubal 7 where This is actually people who are active in the theme community and actually do stuff and it's actually front-enders And it's nice to have them on board here We're going to do rounds of hands and clapping of them later on so let's go into set up How do we do this stuff? So first of all your jubal themes is going to live inside of slash themes in your core root Which I know is kind of crazy. Why don't we hide it down inside slash all slash something so nobody can find it We can find the new but the office and laugh of him. We don't just put it inside of slash themes I'm going to have four different files that you can't work with you have your info files and info files Work the same way as they used to do you have your basic info you have your libraries you have your Abilities to remove css and you have different regions remove css is pretty sweet actually So you have a css file you don't want to see in your theme that came from somewhere You know evil module developer pushed it in you can actually remove it out again And it's visible to do that So I said libraries, okay What is a library the idea behind the library is that we defined Libraries is a collections of css and javascript files And then you can call them from either your theme or your module or actually your template file And we're going to come into why that's so sweet So if you decide, okay, I'm going to do a slider because we need a slider right on the side That's every side needs needs one slider. Well, you're going to add in your javascript and your css file for that and then define it Here's a very very simple example of it. It's a small little library Well, what beta does you define your name you define your css files You define your javascript stuff as well. And then if there's any dependencies This dependency by the way down there jquery if you don't put that into your library We're not going to include jquery in your theme That was 32 kilo that was just goodbye And again, this is you have to turn stuff on in group 8 not trying to use a week of your life to remove stuff And css is getting reorganized as well We're using the smacks terminology base layout component states and theme If you don't know about smacks go read about it. It's a lot of the things we're doing in jubil now It's built on this terminology smacks sma ccs dot css are fuck There is a I have links at the end when I cannot figure out to spell We also have breakpoints built in a breakpoints. What do they do? Well, basically these are your In your theme you define your image size. We have that as well If you really want to put in, you know dumb stuff, you can still put that's dumb stuff in by php and You do that in your dumb dot theme folder. We're not going to talk about that First of all, we're going to look into some of the tools and I'm going to rush through some of some of this stuff So we can get through all of it before you dial them. See how much time do I left left? I don't even know anyways, so your settings file This slide and this slide is only here just so you can like find them afterwards and check it out. So Also, by the way, remember to disable cast the first time you install the site First thing we're going to do here is we're going to look into Our services file and the service file what it do is we have a theme debug element inside a trick now built in And this is pretty much the sweetest shit. You're going to see all week So what we do here is You know, I go in I'm trying to figure out, you know, what kind of templates have I used here And I can of course guess my way through all the templates because that's how we did in 2017 Right like oh, it's called the note. It's probably the the note template says that So what I do now is I have like cleared my cache I'm going to reload it and boom. What is this? You have come you have polluted my markup with comments of sanity And let's look into that what we got here Bam that looks sexy, right? Let's look at this This is every template file. I get a call through dribble. This is going to be in your source code So you can actually now see where it gets at you can now have an idea of this is my my suggestion files I can use for it even better when you go look for it We've provided the path to it so you can find your stuff I know this has created job security for us for years where you couldn't find anything But we're trying to actually make it a pleasant experience to be a theme instead of like a 90 Like day to day nightmare See here what I got here So the next thing is the now I found the file. How do I find my data? Well, here comes kint kint is kind of the new version of kumo and what does it do? Well, you do kint dot content Kint content you just it was not not found And I caught the video and I reloaded it. Okay. Here we go So when I do kint on a given variable, what I get here is like then all of the elements that it puts out The problem with this and that thing we actually really want to work on in the future. This is very good for developers It's really shitty for themas because you can see there's a shit ton of data that we don't use for anything But you know somebody's going to fix that on friday. Um, but kint is the way you're going to get your data right on friday Kotzer you fix it Kotzer is fixing it right now. I can see he's not he's nodding No, he's not um So twig debock, this is how you're going to get there in and this is kind of like Just how our life got to way way way easier. So we we have the template structure when you have 125 templates built into a system, you know, it's Can I have kind of obscure a little bit fast? You know when we we nuked the system we removed all the theme functions theme functions practically don't exist anymore We have added in a metric fuck ton of of templates and there is a fuck ton of templates um It's about 125 of them. So if you go in and you take a look into um Into duple core and figure out, you know, what goes on here as you can see here is um We have all of the templates and they are built into different Folders so you can actually find stuff again. So we have so at least I try to organize them in some kind of You know, um sensible matter These are like the basic groups we're trying to organize them in nobody says you have to use this organization But this was a thing we came up with during a month of Hate and yelling in the issue queue to how to do that. So it's it's a way of organizing it The templates are still doing the same as they used to do back in back in duple seven. So you have html page you have your page um After the page, you know, you have you have regions that comes in you can put stuff in and inside of the region Um, you're gonna get all of your different content. Um And then you have the note and inside of the note That's where, you know, all of the fields are turning up We have fields all over the note and that's actually what I'm really really looking forward to talk about Before we go into that because this is eight years of work Before we go into that the thing we can do now because everything is built in your templates You know, how do you lay out? How do you separate your stuff? How we do that is we use this wonderful function called without And what without do is you can print out all of your content and then you can print it out without certain fields So it basically looks like this you do content pipe Then the trick function without and then the field names you want to remove and it will look like something like this In your template just to get this idea into your head. How is it actually doing this is um, here we do here We have a trick template This is the layout we want to end up with we have a content We have two fields next to it and they're going to be separated by markups and a couple of div and a section tag An article and so forth and and this is what happens when I just print content out right now Uh, it's printing all of the variables out. I have to all of the fields and I want to separate them out So I do content without and then the name of that field and so when I print out content Um, it's going to print out all the other fields that are there and then I can begin to separate them out one by one Why is that really sneaky? Well, we all know what happens when we build a project Now we start by separating stuff out and then six months later Somebody got the good idea of adding that field that the client actually asked for and they'd push it into the code And you never printed out content because you did needed that you have separated everything else out And then what happens is nobody can figure out where it comes everybody yells And it's going to be your fault because you're the themeer and the rest of them are ignorant developers Um So now when we're doing this content without when there comes a new field in it's just going to be printed But you separate them out one by one by one and you then Print them out by content dot and then the field name and that way you can print each element out You can separate them as you want or you get complete control over like that block of content So uh, I really you know an example of that where we hear you have my left part my my on my right part I have my field field image And on the top I have my field text And that's your layers that how you can control on each Each node or each field or if you want to remove a part of an attribute as well, you can do the same thing So this is a way you like you cherry pick what you don't want to see and you can clean that out um But here here's the here's the essence of my whole talk and this has been um I'm not known to cry over markup, but this almost makes me a little bit cheery Is it been eight years of me hating on divotus and dupro? And um, you know we can ask one question How many divs does it take to make a single field with one value? How many divs should we use for that? anybody clever in the room None how about one Yeah, maybe maybe okay. Let's see what we can do here. So here's a field right It has a label and a type and it says yo This is jubel 7 This is what jubel 7 prints out It has a couple of descriptions that have the fields They have field items and field item and they can make sense if you want to build all your markup in one way Um, so this is what classy puts out. I'm still like what the fuck modern Didn't you didn't you say you had removed all the markups? Well, no, no This is classy and we want to have basic markup in classy So if you don't want to if you don't know anything about how to do all this stuff You just want to have some classes you put shit in this is what you're going to get out What you can do is you can do this instead Well, you don't actually don't even have to put the divs in there because we have moved them all out Um, so basically out of jubel core if you don't do anything, we just have a diff around them just for fun Uh, so it's one diff zero classes a hundred percent jubel if we said that a year ago We're actually three weeks ago. That was not possible that patch finally came in I've traveled the world and talked to more conferences. That is good for me Had more discussion we actually started that in Stockholm two years ago We were trying to figure out how to solve this issue and there's a reason for it because it's actually Hard to figure out how to do this And you know, it's great that we just provided you with a single diff, but what the fuck am I going to do with that? You know, there's nothing in it. So how do we how do we work with that? Well First of all, the idea is whatever you want to have it to do That's the whole thought it's your theme you decide what you want to do with it Unless you go with classy or another pre-based theme then you can go that way So for this illustration, I'm using a field and a value like that's how they're all defined And we're going to have actually four different variations of what a field can do Single label single and a label and multiple and multiples with a label That's the four different versions you can have and we have one template to fix this So that means that you're going to have these four variations of a field This is every field that comes out as it has these four variations that makes the template a little bit complicated And this is just so we don't hear people whine in about three weeks when you all begin to use jubilee But like but more than it's complicated. Yes, we know it's complicated because it's complicated Um, but we're grown as femur. So we know how to fix this The other thing is that we have to manage display which figure out kind of a UI How to do the label so we also have to take that to take care of that Which means in now we now we have ups a little bit fast Come here. Yes. We have inline We have above and we have a visual hidden element as well These are all the different things we need to take care of in one template without shooting ourselves too much in the foot Um, so this is how the field template looks This is how we control everything on and to make it a little bit easier to get is we start by saying, okay Is there a label? No, that's not fine. We're going to print these out doing simple if else loops And we're going to go all the way down and you can actually do the else and that's where you get the single value with nothing in and So make it a little bit like pseudo kodi That would say if the label if label is hidden If there's multiples more print out multiples if not print out the single element else Okay, there's multiple elements of them. We need the label. We need to print this data out And if there's just a label and the item, that's what we're going to print out So now we know what kind of data we're going to have fair enough so we can actually do this Pretty easy. We don't even have to put the diffs around. We can just let them float as we want But this is like our custom markup and we can go that way Fair enough. How do we then add the classes to it? Well, this is where attributes come in and attributes is some sexy ass shit Because that's where we can put all kinds of crazy data stuff in describing our elements and work with that So attributes can be a class can be data Your area tags so forth all of these different things of stuff we want to put into our markup In jubile 7 we did this Here you go. Here's all your stuff. Have fun. Do a regular expression on your stuff and try to figure it out What we want to do in jubile 7 all you you could try to do it with a preprocess or gpl file Or a theme function that over took over another theme function, which was Really really brilliant because then you have multiple parts of code So in jubile 8 what we're doing instead is like all the variables through clashy and push it that way And then we're going to provide the classes So we're actually going to provide all the classes inside of a template Like wait a minute Are we going to put all the templates all the classes inside the template that the theme is already sitting in? He doesn't have to find a preprocess function and look for that and hope for the best Yes, that is exactly what we have done. We have used an huge amount of logic and how front it does actually work So what you can do is here is you can add a class to anything and what i'm doing This little example is i do a set class up here So i create a little variable i do a field and then i add you know add the field name and Do a clean class to make sure that if the field name has some kind of dumb data in it We can i still use it on css and then down in my div I want to put stuff into i do my attribute and then i do the dot add class And then i can push the classes in and voila Tax comes from another place and here's my field tax So you can then begin to like modify and play around with your tags as you want to If you have an evil module that puts crapped out that you don't want to have or it came from somewhere You have no idea you could do the same thing you can do a remove class as well We even have a hash class so you can test if an element has a class then you can change the name on it So in that way, we're not we're separating ourselves for whatever we figure out right now We want to call store for durable and you can control your own theme completely as you want So to sum that up you have you know core can provide classes Um, it will provide some classes like it's visible. We have very few things That's going to be provided by core and we're going to have attributes a module can push stuff in And these attributes we from the theme layer can then go in and work with so if I want to remove the modules Well, I'm just going to do a remove module and it's going to remove that and so forth Um, another thing we've done with the classes now down here is we have separated out all the javascript classes Uh, the javascript use uses and so they will be named with the j s dash or something It is also to warn you as a css junkie not to fuck with this class Pretty please if you remove this class stuff will break These classes are not used so you're going to see a lot of double classes We have a full class and a j s dash full The full class is the one we're going to use for all the styling all the pretty shit The j s class is the one that javascript uses just so you know, um So we have done a separation of that so to sum it up, you know To add in classes you can if attributes you can remove them You can add them you can set an attribute you can put in an id if you want to do that Um and print all that stuff out as you want to um And that's like that's how we took the control of how Uh, css classes got generated and moved them away for being like hidden down in the template And pre bus function and actually put it out to the code and if you're a developer and you ever Fucking ever put a class directly into your module. You're fucking idiot and you're pissing on us Let me just let me just say that with a little bit of feeling Because because here's the thing what we want to do from the front end We want to support our developers. We want to make the most beautiful themes we can do We cannot do that if you hide this stuff from us So if you give us that we will help you out. We will take care of the designers for you Isn't that a kind of okay deal? We take care of the designers. You take care of the data We can all like dance out in the sunset have party all night Um, so that's the attributes. Okay, so let's make field and attributes figure out what kind of sexy stuff They can make when they are kissing in a tree So go back to the example before this is like my just three different versions We have yo, we have labeled yo, we have labeled yo a high, which is the Danish way of saying yo Hi, if you're Swedish you say something else. I don't know Um, so you will call what it kind of put our class. It puts out like these field label and stuff So just so you know why they're there Um, the reason they're there is just to describe each element as a basic element Um, good thing about that is like you have fields have a field underscore underscore label And your field underscore underscore item. That's how all your stuff would be predefined No worries We're gonna remove all of them and put it in our own stuff because that's way cooler Um, but just so you get an idea why we have done that and how we've done that If you have multiple items and you have a label you also have a wrapper around the field items So you can begin to separate them in your markup So if you are not a frontend nerd who do not want to do all these things You actually have a basic element and basic way we have described all fields Um But let's start with taking our field and fixing the markup That's going to be the first thing So See here if I'm going to start so here's my fields. Um, it's just a bunch of you know, basic elements I found my template up here and you can see it puts out all this crap And we this should be an on over the list, right? That would make sense. Um, So let's start by doing that So I'm going to go in and just like override my stuff as you can see we have the the markup is It's clearly put there. You have like an item that attributes at class We have the different classes up there as well. So I just reloaded again to show you. I'm not completely full of shit um I should be able to Change it up that way. We fair enough. I changed the div to an ally. Oh, hooray Super hero. Um, but uh, if we if we take it like one step further And this is actually where I kind of kind of caught in my video. So what I'm doing right now is I'm removing all the classes um which you cannot see because I'm sometimes dumb and it goes a little bit fast when you have to like record these things See, yes, as you can see up there at class where we moved the stuff It's nothing in it. So what's going to happen now? Dun dun dun dun dun dun dun dun dun dun dun dun dun dun dun dun dun dun Jubal template one field I want to fix and it's done Nothing else nothing more easy fucking peasy. Um Okay fair enough. Let's put some colors and stuff on it Let's figure out what we can do this. So let's try to take these libraries. Remember I talked about them at the start I guess libraries and how do you actually use them? Well, let's let's add them directly to a template Um, so we're going to do that So you add a library. Let's see here if you want to start Yes, okay, so here we go again So Here's my library's file and I'm defined a very a field magic as I've called it I'm adding adding in a css file called bat the loner I said right pronounced bat the loner Um, so inside of here you can see I have some very magic magic magic css And I'm in my field dash dash node dash dash field html file I'm going to do attach underscore library and then Barcelona and then call to that name of that library So what's going to happen now is go in and look into my markup Just going to search for Barcelona that css boom now you have a template that is calling a css file only when it needs that css file I think do that is pretty sweet So let's let's add some classes and just a fair warning. I do know this example I'm going to show you can do that with just with css. I'm fully aware of how css three works I work with it on a daily basis, but I had to find some kind of example with color sensor You wouldn't like fall completely asleep. Um So here's my css file and as you can see it has a first and a last Elements, there's a border on top border on the bottom color blue Color red and color yellow. These are my colors. I'm going to use for this example All I want and um, let's see here. So these um, and this is again just like Basic demo stuff to show show the stuff off. So what I'm doing here is I'm doing set course I'm setting a variable that says color dash and then I'm doing a cycle red and yellow And that do over loop index. So I'm going to cycle through the x amount of elements that's there So I knew I was in Barcelona. So I thought I should keep it to these colors I could also go with black and red instead, but and then you know, you push in your classes as you want them. That's all good Um They put in a little bit more and I go and test on this So the loop dot index is a thing you can actually test stuff on but you also have loop dot first loop dot last What they do is like the first part of the loop the last part of the loop you can test on that as well So we throw in your last class in the first class and you can see it's got a little bit of pretty pretty pink on it um Another thing you can do is uh, which is kind of fun. You can go in and you can do a count on stuff So you can say well, okay If you're the third element by the way tricks starts by counting from one because it's built for humans and not nerds You can you can set it to count from zero if you have no idea how normal numbers works for normal people So though it is it is proven for for epic geeks, but I feel it very nice to say yeah first element um Which is kind of nice. Okay, so um So now we could do that. Well, okay. How about we just change stuff completely when I hit number eight on my feels Uh, we're going to do another thing. We're going to play around with a little bit So I put in my huge blue Kitter up there number three and still just printing out the marker Well, what if I don't want to print out the values on the specific elements? How how can we do that? Well, um, we will jump in again. You know, it's asked me here when it's jubilee coming out. So Um, and we know that is the eighth element of our list. So I'm going to do I'm doing a count on my if loop index So I wonder if I actually said it. Oh shit. Sorry God damn it I thought I could stop it so Um, when you look at when you're doing these loops, I'm doing I'm doing a count on loop dot index loop That is where we count stuff. So it said I do to the index one or here eight do something else do something else So I'm basically just wrapping out my data. I'm printing out. I'm wrapping that out And then I'm printing the basic element out with the ad classes colors in if I want to have them And then here, you know, we're going to do some dumb stuff with it. Uh I think I think I printed something out like just Normally, we would print out the data, but let's not do that. There's just um, Remove stuff And then do and when it's ready because we know when jubilee is coming out It's apparently when it's ready Not when it would be fun to have a beats party today right and celebrate jubilee because Some kind of politics and when you release stuff that would be like completely stupid That was not me being sarcastic at all by the way. Um So what I've done here is I took the eighth element of an element that I Ripped everything out of it and changed it exactly as I wanted and I added in my css file to that specific field So if this field is ever called it's going to call the basalona file And that to me is kind of giving it to do pretty much, um complete Control over it and this like attached library thing if you if you ever looked into design components If people are aware of design components Quick hand up who knows about design components Okay, the idea behind the design component is we take pretty much a piece of markup piece of css And a piece of javascript and we stack that crap together in its own folder. That's kind of the quick way of exploring That kind of telling it probably going to be beat by that but In that way, we can actually begin to do these things in jubilee We have talked about it if we want to try to push it in I know that louis is sitting over there and is falling asleep He's um I heard there's so many times. No, we've been a big advocate for we've been talking about it We're not going to try to push it in in 8.0 because we kind of just want to get the shit out So we're going to play with these things. Um So apparently it was not enough for you guys to go apeshit that we just got complete control over our fields So let's see if I can entertain you a little bit more Um trick blocks. What is a trick block? That's a whole another thing we can do here So here we have a page and uh, you know that page We can split up and normally you would have multiple versions of a page template in jubilee 7 if you wanted to do something with it Um, but what we're going to do here instead is we are going to Put in a block and inside of that block we're thinking like call in other templates Um when certain things appears the idea here is if i'm on the front page I want to in like kind of inject a piece of markup from another template and like smack that into my template So I don't need to have multiple versions of my page template. Did that make sense? Not at all. Okay. I made a demo and this is using pretty color so you can get it. Um, so I'm here defining a block We called this by the way not a block We called it a trick block because else drupal world gets really really complicated So this trick block is called modern decays awesome, which is troops And we're going to add so some Some stuff into a first color trick right now. Let's give it a color green and the idea here is to say well if this part can be Exchanged when certain things happens So if my page template thinks that it should load The front page it's just gonna push in a little piece here. So here I have an element that I can exchange um And if I load my page, you know, it goes like I'm a trick block. It's green now Um And we go in and we check in. Okay. What kind of elements do we have to work with here? Okay, I have a page dash dash front Um, let me just copy that After note the font. Thank you Make a new file on it. Um So this is kind of it's using the extent command, uh, which you're probably gonna read about or hear about Um And the idea is again, you have a page and you can inject stuff It's only not only the page you can do this on any element you can find in the world of drupal um So here take it and take it change it to green and I'm gonna Make sure that it knows what to extend And this is where video editing by the way, it's really really awesome because that's when you figure out. Oh, I wrote something wrong That actually exploded the first time And let's see here I can't remember. Do we still have to put the whole pattern cuts? Uh, we we can like we can use the shortcuts, right? Yeah, so you can use like an at classy or at Theme name you can go go that way instead. Um so no Here's my note and if I go back to my front page, um I can change that so in that way I can like separate it out. So basically what we did was this I just fit it up into a user Use the block for that create a page dash dash front Which then drew both things it should load because but now that it knows this page instead of extending it It's actually loading the original page and shoveling my page dash dash front into it and then we're going to get that So we now have complete control over markup We can like play around with our pages so we can do all this stuff And this is kind of where we are. Are we happy? Are we happy yet a little bit? Okay um Another thing we've been working on very very long and this is like one of the key features They've kind of been trying to hide a little bit from people. It's actually been there for almost a year and a half Is this call it screenshot 2.0? What screenshot 2.0 does is this? um I can see here i'm defining my screenshot and Here we go That is my that is the biggest feature we put into jubilee not removing all the diffs not removing all the allies Not removing everything else and give you complete control of the markup in the css. No Animated god damn kittens is going to overflow our theme themes. That's going to be good besides of that Um, how does this feel menus and pages in one template file? So this is a menu This is the only thing you need to theme a menu Let me repeat this. This is the only thing you have to use Menu because you can taste that it says if menu level zero will add at the class Menu. Well, if I want to add something to level two I can go with if menu level equals two And do that way and then oh, yeah, we can move all the way down We can do all this kind of sexy shit and using a macro I'm kind of too dumb to really really understand what this is But one of the key points that we talked about when we built this theme system was It was more important for us from the theme layer that you can you can see and feel and Play around with stuff. You might going to break something Well, so what you're sitting on your local environment. You're going to break stuff. Of course you are But that's a feature the same thing we've done with you know the menu No pages is another thing that's always been fun for everybody. It's like Not fun Um We know it's a little bit long But no, this is you have one template now for the page Maybe we should use a little bit of time to rewrite this to something a little bit more usable But we have it now into one So let me see here, okay If if you already fall asleep now, you should wake up So we change all of these things besides of that We also this is kind of this the strange thing we say where by the way we fixed it the bitters And but when I say this instead that we killed support five six seven and eight people normally go Yeah, you I'm kind of like who fucking cares about ie six seven and eight. We fixed the visit boys Markup have been cleaned up HTML five we're using css smacks and bem name based But we're putting modern practices into duple eight. We're not using id as a select us You know because Who uses id as a select us? We've separated up the j s so j s will not interfere if you're just doing css and stuff um, yeah Divide this pretty much killed 90 of all of the markup, which is Rather nice. Um, the jqy dependencies removed as well. Uh, we we You know pushed in Um classy and the idea behind classy is actually when we figure out in two years that all the stuff We have done for the last three years was really really dumb and we need to use another way of building our themes And we really want to do that. We can actually Built a new theme in classy and do a classy two or two classy or whatever kind of dumb name we end up with Um, that was a really bad joke. I know No, so so these are the things that we have done for you so far and there's like I can see I almost I'm actually keeping myself on time. I've speeded myself up a little bit though at this I know that people have listened to me for years have heard me yell and scream a lot of the at developers Um, I'm not sorry for that not one bit Because we needed to do this we needed to to to change what we have done for so long time And the good thing is the developers wanted that as well. Um, so I actually want to um, I want to bring out a little salute to the people who have participated in this and actually I know you're in the room if you have ever done anything with with this the Drupal trick group Yeah, we do we have the free ruben jiggle cards, by the way But anyway, um, I actually want to have you to stand up with me if you uh, help us out with this Up and stand stand up stand up Face the crowd salute them Well, because no when I look at Drupal 7 the only thing I want to do is ring with a bell And make it a walk through the streets um That was 45 minutes of everything we changed over the years. Um Before we go further, this is the links to the theme guide if you want to figure out how to actually build this stuff um Coding standards and our css is really important if you want to learn about smacks go into read that The documentation for twig there is a little bit more than my two slides, by the way But you can go pretty far with this Um, you know a thing we really need now because back when we did Drupal 7 There's no front end us besides a poor john alpin who worked on Drupal 7 and none of us downloaded until Six months after release and then we went what the fuck is this shit and then we have been Working with that for the last, you know five years So if you would all do really this favor of actually downloading Drupal 8 And begin to hammer on it so we can fix some of the dumb stuff I know we go into release candidate one and very very very soon Um, but we really need themas to work on this because so far It has been a very small group as you saw and me be sitting in the corner and yelling No, no, this is wrong. We should do it this way instead I used to wake up in sweat and like thinking oh, shit. What if I thought this wrong? But my ego as a biking to go and I think I did nothing wrong And I challenge you guys to prove me Wrong or right? I don't really care Because we really need we need funding us to work with the theme there because it's going to be our home for the next, you know Maybe five years. So all the dumb shit we have done at late Friday nights and pushing code in is might going to haunt us If we figure find the stuff now, it's really going to change it. Um So any questions? There's a question down there. Could you run over to that mic and do it? Or yell it really loud and I can repeat it He will work He must be a developer because it goes so slow I might know this guy If somebody want to file a code of conduct on me of talking crap of sweets, you'll find fair to do that Yes, I noticed the menu level was zero, but I'm a human and that doesn't work for me. Why isn't it one? Uh, I can't remember. I know that we I've removed it at a patch and then somebody somebody This wasn't it you pushed somebody pushed the class and I I killed it at some point And then we got complaints because people couldn't figure out what we did of the class And I answered snarkly back in the issue queue that it was a feature and I think I just said it to won't fix and somebody who was a little bit more human and not an arrogant fuck Went in I have no idea Was that was that good enough? As you can see the the brain behind and the motor behind the theme layer has absolute first question He got he has no idea This is why we need you guys to come in and help. I need some help Also considering scope css in all that supported isn't it a bit risky to uh attach libraries with css to templates instead of as a global level well, um It can be risky. Yes, but if you follow like decent css standards and Go with smacks definition go with BEM naming and you actually remember to name your stuff correctly Don't use green class. You know don't do that. Give them names that is like scoped in It can't be risky if this is more of a hey by the way check this shit out You can actually pack in your slider with your slider template and you can attach a library You can all that connect it into one folder. Um, so it's more of a food for thought and you can also do the stuff You can break your theme in a millions ways. We're just waiting to see it happen Um, we're not saying that this system is is is fail-proofed or anything else Because basically how many how many in here have built anything with jubilee yet? Good how many like to build in the theme system? Oh about the same amount so that was about what five percent So we don't even there's a lot of things we don't know yet. So yes, it is risky, but um I mean, we're working in the front end. I mean, I'm just waiting for the next apple keynote a google keynote to them to push out Another thingy we have to support. I mean, I wonder when they begin to get our You know, I I watch is when they get a browser built and I'm going to be so happy for All the work What I called that like five years ago watches with browsers. Oh, yeah It's not going to be better. It's just going to be worse Are you done embarrassing me now? Hi, um, I was just wondering how modules if they can provide a markup file for both like clean markup Where it just print divs and one for classy. Is that possible or how is that managed? No, at this point it's not managed at all What I would suggest people do is make sure that you push out You know all the variables that you want to create a class for and so forth Just push it out in the way that classy would do it or the way actually your module would do it An idea we have had for many many years ago was actually creating a group called the markup marines Mainly because it sounds fucking cool um No, the idea was actually having front-end nerds who want to help developers Uh to create better markup and better elements because it's not enough just to provide the documentations There is developers who don't know how css works or how we work with css, which is perfectly okay It's a skill set that is very far away from building your modules So at this point no, but I would suggest that you know Jump on some kind of social media if you're a developer and yell out help and We're getting more and more front-enders in we are having the Group front end united is getting bigger again And we really want to get more people involved and actually help our developers because this is not Thema versus developer I know I've put it up put it up that way for many years because that's how you create a good healthy rivalry and you know you get people entertained and you can you can Talk crap about other people and I think that is fun. So No, but but what we actually need is we need people to help our developers We need front-enders who know how to build these things So we don't end up having a module that has a three border three line border around, you know Certain elements and yes, I've seen that in the module that many people have used and it's not good And we can make our baseline so much better But at this point no there's no way of saying classy versus call or stark I call it a call because I just think it's called But classy is the idea behind separating the marker out on the classes out Because that was the way where we could when we figured out we did wrong with classy We can kind of just push it out and we can create a new version of classy where we actually fix it up So we have taken the control and moved that Away from Drupal call where everything was living back in the days I would I wish that we could take every template and move that directly out into the theme director instead, but That's going to be a bike shed. I don't have the energy for at this point Thanks More questions. I'm not really off the hook yet. So you can just as well come with questions I have a whole hour and I'm going to fill it up All right, so there's a couple of things here A couple of sessions that I actually really want to have people to come and participate in Tomorrow at 1045 We're going to have a buff because there's a bunch of brave Belgians who think that we need to move front end united to Belgium Front end united if you don't know about that. It's been one of the reasons that we have to done all this work because we were trying for Small about actually ever since jubilee conan coban hig in my home city We've tried to organize front-enders and get front-enders to come together and try to figure out how to fix jubilee Because you don't get anything out of bitching and moaning Well besides of bitching and moaning which can be fun, but it's not very constructive And so we've been trying to organize people get them together figure out what we could do And that's actually how we got twig in Was actually by no discussing these things and playing around with these things So tomorrow at 1045 there's going to be a meeting around The next front-end united, which is a front-end Druble camp going to be a weekend in somewhere in belgium. I'm not really sure where but I mean the food is Kind of french, but it's in german sizes and the beer is pretty awesome So I mean if it goes completely crap, we can know we can always just eat and drink and have a good time Now but we had to begin to build all of these things had to begin to look at how we can extend these things And what we're also trying to do with front-end united is making sure that we're getting We're not ending up like only doing dribble stuff and patting ourselves in the back for being like Yes, it's so awesome with jubilee because there's a lot of other things out there And we're getting slowly off the island and especially getting people trained in What are we going to do with twig camp conference camp is going to happen at some point After new years because we know the next three months. It's dark and it's cold and it's miserable and we don't want to do anything That's tomorrow 1045 Room 128 there's a buff there if you do dribble eight work and you do dribble seven work and you want to figure out How to put this stuff into dribble seven There's a dude actually a belgium dude rené who have done this He have messed that stuff and there's a session about how he got twig into dribble seven I'm just looking forward to never touching smelling or knowing about dribble seven. It's been seven years of pure Hate hate relationship. I do not know why I still stayed but I did Another thing is like all week we are running sprints. We do have a critical issue We need to fix But it's not so much the critical issues also all of the markup things all of that stuff We really need you guys to come in and help out look at the code figure it out if a template is completely unreadable It'll help with the documentation So the next person who's like burning is burning himself down and figure out. Oh, why is the menu level zero? Why is that well? If we know that let's put that in as a comment so we can actually document that On friday, that's going to be the epic sprint today because first of all, I am expecting us to have the RC one buck done so we can celebrate that but there's going to be a bunch of us We are going to run multiple amount of sprints on different issues and Don't really care about your level of expertise in anything in doable If you have no idea how jubilee it works That's even better because actually having people to download jubilee trying to some of these things out Figure out to do documentation better figure out how to do all these things. It's really really important for the project So Even more important tonight There's a party that all the locals in the spanish community have organized got a ton of sponsors on and I I can talk about this for months But I would rather do that the beer in my hand instead of talking directly at you guys and discuss all these things So that is where we're going to be tonight. Um, it's all it's also on the website where you can see it's put in as like 30 minutes away from here on the l4 I promise you that I would put my slides up and I actually did tiny you all Slash jubilee twig barza is the it's my template If you want to give me feedback and I would really like feedback on my session as soon as the session is done If you go tiny you all come twig feedback, you're going to be redirected over to the Jubilee website and you can give feedback on this the reason More besides of it's it's more fun to get feedback in the us because there's always somebody who get really offended by my personality, which is good Um, but it's actually nice to figure out Did I bore you to death to do you get anything out of this? I love to talk about this I love to travel around the world and become try to become better presenter But also figure out this is the right way you have feedback generally on this trick stuff If you just hate it and you want to use php template forever You can still do that it's floating somewhere around the corner and jubilee right next to the Palm module or something we still have it so you can you can Exactly you can you can fire it up if you want to keep playing in php template I will promise you that I will never answer any questions and these you queue for you ever again if you do that But that's just me being an asshole. Um, so with that, um, I'm more than decay and I'm now not more the angry theme I am the happy theme. Thank you all for showing up. I thank you all for you know, not falling asleep Which is pretty impressed. Well besides of louis who was like Yeah, I know sorry louis, um Thank you all for showing up. Thank you all for actually sticking around triple and having a full room and doing this presentation It's really really nice for me. So thank you Oh, and by the way, if you really like kick ass stickers and you want to have something that's cooler than then the rest of the kids I got this bad boy up here But you have to come up here then so I can like hand them out