 It's quarter two now, so I'll make a start. So welcome everyone. My name is Magda. I'm from previous NEXT, and today I'm going to talk about droopa weight theming. Can I just get a raise of hands? Has anyone actually done any droopa weight theming so far? No? OK. So I'm just going to do a few points. Hopefully we'll get you started and familiar with droopa weight theming. So in the overview, I'm going to basically list some of the new features that have been introduced into droopa weight. If you've gone to Angie's presentation, she's actually mentioned just a couple of them that I'm going to mention. So apologies for the repeat. And then I'm just going to do a bit of a walkthrough on how to set up and create a basic custom droopa weight them. So some of the new features. So HTML is now used in all droopa weight markup. This will also mean that forms will also take advantage of some of the HTML5 tags, like date and telephone, which is actually quite important for mobile devices. Also, sorry, responsive. Sorry. The slides have gone a bit. Sorry about that. I think my internet's just sorry about that. I looked at my slides have just gone a bit wonky. So sorry, as I was saying before, HTML5 has been introduced into droopa weight theming. And next sort of lot I wanted to go through is the responsive layouts. So all the four droopa themes are now responsive and mobile first. And you can see also the toolbar has also been giving responsive treatment as well. Sorry about that. It's just like my. There's also been a few front end technologies that have been introduced into droopa weight. So things like modernizer, underscore JS and backbone JS, which is used for droopa 8 mobile experience and content authoring as well. The JS performance has been improved. So a lot of jQuery has actually been rewritten in JavaScript to improve the performance. Also, now, currently in droopa 7, jQuery loads in all pages, whereas in droopa 8, you actually have to specify which pages you actually want jQuery to load. And also jQuery now loads in the footer, as opposed to the header section. There's also been a few CSS standard introduced. So you may be aware that in droopa 7, the CSS isn't such so nice and clean at the moment. But there's been a lot of work put into implementing this Max and BAM methodology. And I do recommend that you do go and check out this link, which actually specifies what these rules are. Also, responsive images have been introduced in Core as well. So basically, that's using the responsive image module. And that allows you to specify what image size that you want to output based on the breakpoint. So it's like the picture module, so picture element. And here's just an example of how you actually map the image sizes to your media queries. And I'll actually go through it a little bit later on how to set that up. There's also been improvement in the accessibility. So greater use of area attributes, specifically in the content offering side of things and in the toolbar. There's also been a couple of day scripts introduced to improve accessibility as well. There's the Drupal tabbing manager, which restrains tabbing to certain elements. So whenever a user is completing a specific task, then the keyboard tabbing should be restrained to that specific or relevant target they're completing. And then you can use Drupal to renounce, which is the text that you want to be read out by screen readers that is applied to the restrained tabbing. There's a new templating engine that's been introduced that replaces the current PHP template. And that is Twig, which is Angie mentioned. The keynote is also created by the same people that have created Symfony, which is the PHP framework that Drupal 8 is adopting. The template is an open source, so it's already out there. It's relatively secure compared to what we have now, which basically allows you to put anything into your templates, including SQL queries. And it's relatively fast, although how fast it's in Drupal, that's a different matter. And it's also easy to learn and has very clean syntax, so you don't have to learn PHP anymore. So he's just an example of a title being printed. So you can kind of just read basically what it's doing. So it's just checking if the title has been there, and if it is, then it prints out that variable. Now, debugging is also available in core. At the moment, in Drupal 7, if you want to know where your templates are or what you should call them, you have to enable the develop thema module, which is OK. But this is actually quite nice, and you don't actually have to install anything. So that actually shows you debugging information in your HTML source. So for example, this is for the page template. So this shows you sort of the file name suggestions. This is the cross next to it shows which one is currently used, and this shows the location of the template. So to enable it, it's very simple. You just go into sites default services jama file, and then you just change a small configuration. So you make the debug true instead of false, which is set up as default. And if you're using Firebug, you just have to make sure that your lang comments to show. And you can also use the dump variable, which shows all the variables that are present in your template. You can, for a nicer look, you can use Kent, which is actually part of the develop module in Drupal 8. So you do actually have to download and enable it, but it may end up being in core. There's a new core base theme called Classy. And it's actually going to be the base theme for all the core themes in Drupal 8, about the Con7. And basically the reason this new theme has been introduced was because there was a census that came that they decided to have in Drupal Con Austin, where they, from a survey, discovered that sort of a third of front-end developers wanted any kind of CSS in Drupal, whereas two-thirds did want some CSS. So what they're doing is they're trying to move all the classes from template files and functions and move them into the core templates. And then they'll move all the core template files into Classy. And core will just sort of end up with markup and not might CSS at all, only for functionality. So Classy does contain sort of minimum clean CSS classes sort of just to get you started. And if you do want to use or have start off with Drupal's classes, you should set up Classy as your base theme. So creating a custom Drupal theme. So there's sort of two main approaches, as I mentioned before. One is if you want to have Drupal classes, then you basically create a sub-theme using Classy as your base theme. And then if you want to create a custom theme with no classes, then you don't use Classy as your base theme. So the file structure in D8 has changed slightly. So your core themes are now in core slash themes. And any custom and contrab themes in the themes directory, which currently in Drupal 7, that's where your core are. So it's a little bit different. It is good practice. It is good practice, however, to move, to have your contrab themes in a contrab sub-folder and your custom folder just to keep it clean. So here's just sort of a breakdown of the file structure in Drupal 8. So something will be familiar to you, like your CSS, your images, and your JS. But there's a few files that are a little bit different. So I'll just go through them. So basically to get started, you create your theme folder in theme slash custom. And then you create your .info.yaml file, which is basically the replacement of .info file in Drupal 7. So what do you specify in the .info file? This is basically your metadata, which is a little bit similar to Drupal 7. So you have your name, which is just a human-readable name that appears in your list of installed themes. Then the type. So that's the extension type. So you have to specify that in Drupal 8 now. So that's either a theme or a module or a profile. So in this case, it's going to be a theme. Then a description, which again is just going to show up in your list of installed themes and what package it is. So that's basically if you want to group your themes under a certain type. And then it's in what core, which in this case is going to be Drupal 8. And if you want to use classy as your base theme, all you basically do is just add base theme and classy. Then that's it. Then you basically have your regions. So it's like in Drupal 7. So that's the machine name. So that's what you sort of print out in your template files. And that's the human-readable name, which appears in the list of configuration blocks where you can assign content to. Then your CSS and JS files. Now, this has changed a little bit in Drupal 8. So I'll just go through it. So in Drupal 7, currently, you list your JS and CSS files in a .info file. Or if you want to add them conditionally, then you use the theme preprocess. And you use the drupal.addclass or drupal.js. However, in Drupal 8, basically, you add your JS and CSS files through what they call asset libraries. And each asset contains a combination of CSS and all JS files. And then each asset then is attached to either a page to all pages or to a specific subpages that you want. And libraries need to explicitly declare their own dependency. So if you've got using jQuery, then you need to actually specify that you need a dependency of the jQuery library. So how do you define an asset library? So that asset library is actually going to your .libraries.yaml file. And the way you specify is that, so here's an example. So I've got two asset libraries, so one's called global styling. And that just includes some CSS. And then you've got another asset, which is called slider. And that includes CSS for the slider and JS. And you notice you also have to declare dependencies. So you've got to load the jQuery library because you're using jQuery in this case. So then once you've defined your asset libraries in the .libraries file, then you basically attach them. So if you want to attach them to all pages, you just list them in the .info.yaml file. So that's that one there. So it's basically the theme's machine name and then the name of the asset that I had specified before. So that's the name. And then if you want to attach it to different subpages, you basically implement it for the theme preprocess hook. So you use the attached library array. And then you just say the same thing. You just specify which asset library that you want, which asset library you want to attach to the page. So in this case, I've said that if it's to only load that slider library, if it's only on the front page. So you can also sort of remove an override CSS in the .yaml file as well. So that's just really simple syntax to remove. And this is just to override. So templates in Drupal 8. So all your preprocess and logic are now in .theme file. So that replaces the template .php in Drupal 7. To override template files, the same as you do now. So basically just copy the twig file to your template folder. And then you use the debug for location and hook names. And there's just as an example of just some twig syntax. So I showed that one before, so that's pretty straightforward. This one is if you want to print out the footer region. So that's just page. And whatever the name of or the machine name of the region that you specified. And that's pretty much it. And you can also use this one. It uses the twig filters. So this one's using the translate filter, which basically is the translate function. So there's actually quite a few of them available in twig if you want to amend variables that you're printing out. And this is a place to go if you want more information on twig. So responsive images. So as I mentioned before, this is new in Drupal 8.core. So basically it's a combination of the break point module and responsive module that's now available. And it allows to map image size to media query. So as I mentioned before, you can output what size of image that you want based on the media query. So to configure that, first you have to define your media queries. And that's done in your .breakpoints.yaml file, which is located in the themes root directory. And so here's an example of one. So here's the media query group. So because you can actually specify different groups, like you might have one for a specific type of image. Then you have the label, which that's just what the label appears in the UI interface. Then you define your actual, what your media query is. So at what point do you want that image to appear. And then this is just the way. So that's just a position that media query shows up in the UI. And then there's also retina support as well. So once you've done that, you then create the image styles. So there's the corresponding sizes. And then you map the image styles to the media queries. And you do that in the admin config media responsive image setting. So once you've done that, this is the configuration. So then you just basically, as I showed before, you just map what size of the image you want to show at which break point. And once you've done that, you have to set the format to responsive image in the field. So you'll see you now have two. You can select either image or responsive image. So you have to select the responsive image. And then once that's done, then what you just need to do is go into the image field and select responsive image mapping. And then you select which profile that you created for the responsive image. And once that, that's it. Thank you. I finished a little bit early. Then, you know, is there any questions? Yep. Do you list that with the JS? You were listing the dependencies with the JS query. Do you list that inside your JavaScript? Do you list that on the libraries? In the libraries? In the libraries. Yeah. Yes? Modules, like country modules and core modules, where are they going to store their templates? And they're going to be similar sort of things. That's a good question. I think it's not quite actually sure about that one. I haven't. I presume it's still going to be in the modules. But I'm not quite sure about that. Sorry. Yeah? Yeah? Do you have a date running in the play? Because I would be interested to see the source view of the had been in the other area that I'm actually using. So this is kind of one that I've sort of been playing with a little bit. No, that one isn't. I've got one that kind of does. So I thought I had one because I did it for the demo. It might be this one. It's not. No, I'm sorry. I did have one because I must have. No, as far as I'm aware, it doesn't. Yes, it will actually have to be in the theme. So it will have to be done in the break points. But once they set up, then you can do it. The issue they have is, of course, there's only a couple bleeding-edge browsers that have to be in the display. So they have to have a polyprop for all the other browsers. So it's an interesting case where you can design a really sensible admin UI to define the break points. And then be able to map images onto them and store that correctly. But then the actual front-end implementation is wondering how that will play out in the front-end, whether it's sort of storing all of those images and decide which one to display. I think this is a great point if it happens in the front-end where it does some kind of a mental width, the screen width. And then just pulls one image into this one to go. I know that the polyprop, if it works as good, it has not yet been able to jump it, and decide, oh, this is the image that I need. I'm going to get a graphic and that's it. It was the same in here. The D7 can do all the different things. The D8 board can do all the different things. The attached, you can do that in the co-op. Yeah, as far as knowing, yeah. Dana? I think it was compared to D7. I think it was pretty straightforward. I think so. Yeah. That's good. Maybe I'll do that. Yeah. Sorry, the no. I don't know, because we haven't... You mean for D8? Yeah, that's something we haven't really thought about. Have we, John, at this point? So I can't comment until you start sort of thinking about it, because I don't want to sort of say anything that later I'll say, well, yeah, we haven't done it. So, yeah, that's the kint one, yeah. You just put a kint, print out the kint variable in the template file. Yeah, so sorry. So here's the demo. So it would be in... Yeah, kint, so... Yeah. And for the other one that's not as nice, you just use dump instead, but that it's not. I think that's actually the name given to the library, yeah. And it's named after someone, but they spelt in correctly. So it's meant to be like knell or something. Yeah, I haven't tried it, but I think, yeah, you should be able to. Sorry, John, so what did you... Sorry, is that... Yeah, that's fine. No, but it is something that you do it once you've installed, develop, and you've got an option then to enable it, yeah. Yes, yes, it is. Will it produce an error? No. Yeah, no, I actually haven't tried that. Yeah, I haven't actually tried that. Yeah, just like the development module, because it's part of that. John, sorry, what did you want to see? Oh, OK. I have no idea how to explain to you how to find the HTML code that this thing comes from. Yeah. Look at yourself being there. Excellent. Take a look at your base name and then go meet. Yeah. Yes, I don't know why this is not working. I'll just try it in Chrome. So you just... But, yeah, you should just inspect element and it shows it to you. There's a debug flag. Yeah, so I don't know why it's just not a mask on weed, but, yeah, it's just a debug, so once you've done that, then it just displays in there. Should just go... I'll just go view source. It should just display here. Yeah, and that's all we need to do is just enable the debug. Yeah, yeah. Yeah, that's sort of part of the BEM convention. Methodology. So if it's... If you're writing a component and if it's, like, a subcomponent, you'd use underscore, but if it's an extension or modifier, you just use dash. So, yeah, if you just read up on BEM or the link that I sent... that I had before on the CSS coding standards, that's basically where that is. It's sort of a CSS methodology on how to sort of name your CSS. Oh, you mean, like, the weight? Yeah, you can, yeah, you can actually do that in your info.yaml file. You can specify... Oh, no, actually, yeah, you can, I think, specify it there as well. For more questions? I guess it depends on... on whether the image size is going to... is, like, the image size is... the size of your images are going to change the same as your breakpoints that are outlining your SAS, because some of you might want document images to change. And you may decrease their are different to what the one's in the SAS. So if it's the same, then yeah, but if it's not, you might... then no, it just really depends on the image and the size, if that makes sense. Any more questions? Yes? It's whenever things look bad, that's when you kind of define your breakpoint. So when you start seeing that something isn't looking correctly at a certain breakpoint, that's when it's introducing your breakpoint. No. Not that I can... Yeah. So you've got to kind of think of device-free more just the size. So forget that whether it's going to be, you know, mobile, whatever that means, or tablet, because that's going to change. It's just whatever size it should, like, look good on all sizes pretty much. Yes? Well, you can remove the CSS files. I'm not so sure about... I mean, this is basically because it's... because this is basically because you're logged in at the moment, so that's why you're seeing all this stuff, because you need it for the toolbar and configuration, but I'm not sure how that's going to... if you start removing them, whether that's going to start breaking other things. Any more questions? Okay, I think that's nearly break. Thank you.