 Just start your slideshow Yeah, it's you won't hear it. Okay, we'll hit play on the oh, it's just in the web browser. Okay. Yeah Okay, so there's no yeah, just making sure This is gonna be pulling me down Okay, I guess I'm gonna get started here. Yeah, sorry for a bit the technical delays So this session is gonna be about creating a Drupal a theme using all these wonderful technologies, it's it's kind of a mouthful, but It's it's gonna be somewhat of a repetition of some of the stuff that run yesterday in terms of the new features of the Drupal 8 theming layer But I still wanted to go over that. I don't know how many of you like have attended sessions yesterday there's a I think there's like a theming session from them fundamentals of Drupal 8 theming and There's a KSS session today, too, which is I'm gonna touch upon that stuff as well Like by show of hands like Mess with Drupal 8 already like and on the seeming layer Yeah Like in terms of like the gulp and node stuff Anybody is using it at this point Okay cool Okay, so a little bit of background about myself. I'm a front-end developer with activation I Guess I should say front-end developer slash designer. I'm more of a designer background. So some of the stuff that I'm gonna talk about this In a ways kind of beyond me because you know gets technical really quickly but Anyway innovation is I globally distributed company. We are I think around 120 people at this point Headquarters is is in Vancouver. We have an office. I think about 30 people in Montreal, which is From what I hear where the next Drupal North is going to be hosted And then flew few places in the States in Europe We are a sponsor here as well and we do contribute to Drupal 8 accelerate program to kind of help out with you know getting that release As soon as we can I guess So yeah, as I said, it's gonna be like a two-fold thing I'm gonna just run over some of the we're kind of already late I guess With the technical stuff. So I'm going to run over the the new features for the Drupal 8 In terms of like what theming stuff has been changed Or like completely new to Drupal 8 and then we're gonna go over the the node gulp setup So this is all based on my sort of experimentation or just proof of concept Just I wanted to spin out a theme as Drupal 8 started maybe like half a year ago and at the same time there's all these tools and in a front-end world that are Like little toys shiny toys that you want to grab and and start using Regardless if you need them or not, but it's just like so tempting to experiment with stuff and Try to incorporate that into your workflow. So you can see the demo for the theme I Am briefly gonna just show you by its In terms of features like it's I was actually like when Drupal was beta 6 I set this up So it's it has the lip sass going the sauce partial structure Obviously, it's responsive And got some other stuff integrated into it. So I got some animations going here and just like for the sake of Demo like I can show you that we got that Stuff going and we're gonna talk about sort of integrating some of the GS stuff Into this theme so I Guess it'll be relevant to what I just showed The source code for this is on github and it's also on triple that work as a sandbox project So you can check it out there Take it for a spin So as I said Drupal is getting closer to release they Hopefully sometime this fall So It's nice to be kind of an early adopter and try to start using things to see how they work With that I just wanted to go over the basic structure of a Drupal theme And a lot of it is going to be very similar and familiar already for anybody who's doing theming stuff at this point With Drupal 7 so As you'll probably already know Drupal has switched to YAML for like Like to say the info file the libraries file that we have there and The stuff with the green tax. I don't know if you can see Very well, but in terms of those colors in there, but the green stuff is basically the three three things and The theme itself is the in my case this theme is called monoset And it's the name of the theme And that theme which is your former template PHP file So the info file is pretty straightforward again You have to just be careful with the YAML format like space sensitive stuff But it's pretty basic you just declare key value pairs and The name of the theme type description all that stuff The libraries Is a new concept For Drupal 8 and it's basically a way for for themers to integrate Declare their dependencies I mean I mean in terms of like their GS and CSS adding their GS and CSS assets so with Just going to go over some of the ways how we can manipulate that Adding the CSS and GS files And into into the theme Removing stuff from Drupal 8 like we're gonna talk in a second about Drupal 8 being more of a clean slate for for developers or like It's not providing like default to Mark up the core. It's not dictating stuff to you by You know providing this the classes and things like that, but at the same time there's still some stuff that's loaded So in this case, I'm just removing some stuff that I didn't want to use the normalize Library I just have my own kind of reset in in in the partials that I'm using using SAS So just remove that and you can remove anything that is served by core and that's in your that info file So again, it's a monoset that info that YAML, which is the name of my theme Defining a library again, it's in that YAML file pretty straightforward. I'm just pointing to the Saying that this is a CSS file it it's a themes CSS file it lives under My styles directory main CSS that's where everything gets compiled So and this is called it globally because it's like the style that I wanted to be available across all the You know the whole site all the pages same with the JS so Declaring dependencies As I said, so Drupal has less assumptions now Drupal 8 has less assumptions. So jQuery is not there by default, but you can Declare it as a dependency So you just have to say that You know, please stick it in there. So it it will Once you declare it in your library basically Like I'm dependent for in my main JS file for jQuery to be there So I'm stating that in in the library's file And there's a bunch of other things that are available in the in if you want to see what comes with Drupal core, it's it's all under core assets. There's a bunch of other things like backbone and modernize or things like that Giving you know weights are specifying a scope for your JS files. It's pretty easy also done in the libraries file so here I'm just Kind of messing with the weight of where that that CSS is going to be Obviously, it's it's more important for JavaScript like if I want to send it to the footer I think still it's by default. It's going to be in the header most of the time you would want it in the footer and Probably your custom stuff you would want to be like in that specific Place in the footer. So Like specifying that scope but giving giving the weight is is pretty Pretty easy again in that libraries file I'm specifying the media type like I'm not using a print style sheet here, but Pretty straightforward as well. You just have to point it and give it the parameters of media print This is a bit getting more interesting where you can specify a library and then only load that on a specific page or specific content type And this will this has to be done with a pre-process function So and it's in my monosat that theme file, which is again your former template that PHP file And I have to find a front page library Which is only going to be loaded, you know for those animations They're not like crazy heavy, but still there's no point of loading them across the whole site. So just Serving those for the for the home page Adding Google font to I mean, there's a couple ways of doing that. I think there's still a way Maybe now there's a way to that add that directly in the libraries file. I ended up doing just again a pre-process function and and My monosat that theme file And let me actually show you How much of this you can see but so again just going to go Kind of to summarize again, this is the the that info of the That info that ammo file So again name of the theme. I'm going to talk about this declaring Classy as a base theme just in a second. So like all this pretty straightforward so those are the two libraries that I wanted across my site global and vendor and These is where I am removing the stuff Regions are pretty straightforward. It's like a familiar concept from Drupal 7, right? So we still have those in in terms of the libraries file itself You can see again, this is my global library Print style sheet if I had one all the dependencies then I'm going to ask for from Drupal My vendor library that I just referred again in here To and I wanted I wanted that globally again So it's it's declared and not that info file will be available across the site So just a bunch of scripts that I've borrowed from other people for that like for the manual for animations and SVG injections just prism is for code highlighting so some of the stuff that I've Just utilized in this theme and then again, this is the front page library that I wanted only available for those animations and effects So back to this So declaring Classy as a base theme again as I said so Drupal Comes pretty much as a clean slate doesn't dictate you any more as it used to like the Drupal 7 doesn't dictate the markup or class themes things like that Much nicer to work with I mean It's a big win from my perspective On the other hand if you want some sensible defaults you want stuff Already to be there, you know some divs and some like BEM style CSS Class names and things like that you can declare Classy as a base theme and that will basically reroute everything through the Classy Classy has a collection of templates already You know sitting in there. I mean it's a core theme and it's it's a core it's a core base theme for Bartek and 17 too so That's that's the idea I guess so yeah, and just the There's an effort and like again, there was a session yesterday by Scott Reeves about tweak stuff and Removing all the preprocessed stuff from the Drupal theming layer So it's removing that abstraction layer Again for me, it's a it's a big win for Drupal 8 You basically like everything is now in template files So for a themeer, you know, especially from a designer background like, you know where the stuff is coming from there's no You know trying to figure out What it is how it is like it's it's just removing that abstraction In terms of preprocess process functions that run by by Drupal One of the the great debugging features for for Drupal 8 This is actually in Drupal 7 as of maybe 7 3 2 I think 2 is that you you can enable well, you don't have the services yaml file, but you can Unable the debugging feature where you you would see Like output of like where your templates are coming from In in the in also in the second In a source code in DOM, basically you will see the HTML comments and so with with the Drupal 8 install Basically when it installs you have a service yaml services that yaml file, which you have to Set the Debug to true like I've actually set some of the other things To true like the outer reload and cache to false And created my settings that local that php I think that actually stripped another kind of level of caching that twig was trying to do and for me it was um kind of important because some of the the The gulp stuff running Browser syncing and like watching for all the stuff that's happening with your templates kind of important for for it to happen instantly and So that just removes that extra caching level Yeah, go for it Yeah Oh, yeah, I mean I can I'm totally maintaining this again. This is this is just on my local, right? So this is the service is that yaml file is For anything on your local you'll have that debug true Right, I'm just not sure that outer reload true if you have to actually You know specifically say that you want that and for cache false Like most of the time you will end up with the settings local php file too on your local system But none of this stuff is going to be Uh, you know, it's not in my theme, right? So it's it's just in my in my install insights default So that's the idea for like Drupal show showing you where once you have that debug enabled and this and when you inspect your stuff Basically your your theme you will have these HTML comments and it's going to show you stuff is coming in core from core or if I say it say had classy as my A base theme it would you know reroute everything through that look at the templates in there So by looking at this I can see what template is used Where it lives grab that template, you know decide how specific I want to be with that template Stick it into my You know copy paste it and start modifying do whatever you know in terms of Class names and things like that and markup I can probably just show you really quick. Oops Sorry here So the idea How much of this is going to be seen but Yeah, so all of the stuff in the green She can't really see so All of these comments If you go down like there's a bunch of It's a bunch of template files basically That shows you where the stuff is coming from Um So second part to this is the the integration of this node based build system with lip sauce and gulp stuff And as I showed earlier like in that file directory There's some some things that are not specifically drupal related again. It will be like the The gulp gs file It will be the node modules Um In package json file Now again, this would not be necessarily drupal 8 specific. You can run this on any setup like drupal 7 I There's a I think there's a catch with some of this stuff with drupal 7 because That info files not that info that yaml files, but drupals 7 that info files kind of mess with the node modules because it contains some That info files as well, but Otherwise, yeah, this is kind of agnostic, I guess In a way So in order to get this going you have to have node installed on your system And it's I don't know how many of you again like familiar with this like I've I've previously I've run the most of my stuff on on ruby Which is a pretty similar setup. So once you have the a ruby installed on your System you have a concept of jams And you use bundler to kind of declare all the dependencies that you want to You know be be using in in whatever process or tasks You're running. So Node has its own installer You can either use that or if you like I'm using homebrew with homebrew. It's pretty easy to install as well Once you have the node going you have to install some packages like node has the node package manager npm Which install some some packages globally and some packages Directly into your theme right like where you tell it to to install them so gulp is one of the things that has to be installed globally and also Like in in in a theme um Once you get that going basically you cd into your themes directory and you do npm install it fetches all the dependencies from the node repos wherever and You after that you basically get ignored all the stuff because it's not I mean you could get pretty heavy in terms of all the The stuff that you're going to grab from note that each module Is going to have some weight to it so you get ignore it and It's for an x developer say or somebody like if it's like a project that you're sharing They're just going to go through this install process once you once they Download the the theme so the package JSON file Uh Contains the basic information about What this project is about it could be pretty minimal again, and then you just declare All the dependent packages that you want to use i'm going we're going to go over those In sec and you can add more stuff to it if you feel like it again, there's like plenty of Stuff in in in the node in the node world there Um Actually, let me show you too the actual The actual The actual directory for this. I don't know if I can zoom here. No, I can't really It's hard to see here, but anyway, just that This is where all the node modules are the gulpgs file just sitting in that root directory Um, and the package json file Does this kind of make sense so far? I don't know Yeah Yes, no, maybe Okay um I guess one of the things that Like if you're running, uh, like a sass set up and you probably are at this at this point most the people should at least Be doing sass. That's the point of this whole thing Like I've tried to start messing with The lip sass which is actually not really It's not anything different from your ruby sass. It's just ruby sass has started as a as like as a ruby project from what I understand, but lip sass is just a a port of same sass stuff same A library is just done in c++. I believe And it's been gaining Some momentum in terms of it's like versioning one of the disadvantages of using lip sass versus ruby sass was That it was the feature. It wasn't as feature reach. So some features were behind like if you had to have something in your In your sass creation process or you run certain functions certain things like it might have not been there at this point Lip sass is catching up and actually ruby sass is waiting for For the for those features of lip sass to kind of get on on pair on you know have the parity Yeah, one of the biggest advantages of lip sass From like what I hear and like it this pretty much one of the first big things is that it's speed. So ruby sass Not as noticeable on a project like this where you basically have a one pager site, you know And you have a few partials But on on bigger projects where you have like a Massive css architecture like I've heard people You know compiling times getting like you know a couple minutes long, which is pretty bad So this is definitely not not the case with lip sass. So yeah, I there's some comparisons, but like I don't really Know the numbers exactly but everybody's saying it's a lot faster so in terms of feature again back to feature compatibility you can check out This site which basically compares all the sass versions You can see what's there for ruby sass versus lip sass and again, some of these are going to be Like I'm I haven't used like any of the crazy functions math functions and things like that Uh, so again for me, it was pretty easy to adopt lip sass because Like in in the beginning, I think like maybe six months ago I was missing some the mapping stuff was missing for sass or something wasn't there Uh, there's a couple other things that I was kind of missing the breakpoint Gem, I don't know if you've heard of that. That's like it was kind of a thing that I've Adopted and to mark workflow, but uh, that wasn't there because again, it was ruby dependent, but Otherwise you can see now like most of the stuff is it's pretty close so Another point is the compass Like many people have used that in the past. I've used it in the past, but I have kind of stopped using it and Uh, compasses It's it's a ruby I guess it's a library and you should say or it's like a just a bunch of mix-ins and different things that Utilities that you can utilize again in in your Sass creation I I've as I said, like I've stopped using it and I haven't really been missing it that much also compasses moving to being more agnostic or actually adopting the the Lipsass as it's as of version two Two or like I think it's at one something at this point Um, but again, there are alternatives like if you're into using mx in library, you can use borbon You can use need for grids if you're into grid systems You can also, um I think you can use suzi. I don't know if you've heard of suzi grids just a grid system that um I think now what what what can be set up with lip sass, but originally like it it's coming from ruby um Again switching switching back To ruby sass with this setup. It's pretty easy too because I've declared all the packages through my through my package json file, but I can I can switch up my my Uh Instead of using lip sass I can say I want to use ruby sass and declare that as a dependency and I'll be running ruby sass instead Did somebody else? Yeah bootstrap in like in in in what uh In what sense sorry Yeah, like Those are more like what you call semantic grids like need or or suzi grids They're not like you don't have to have a specific markup in order to set up grids for your project for your like layouts with Bootstrap you have to have those those glasses, you know span seven whatever as far as I know like in terms of utilizing Uh Bootstrap into this workflow. I I I'm pretty sure you can do maybe you will another thing that you'll require another dependency will be bower you would run through you would run it through bower And because it's just like another Another layer added to this For me like again, I kind of wanted to keep things simple. So That's why it was like Uh getting rid of those extra dependencies like dropping the ruby stuff Like why not? Keep things like uh, so back to the scope stuff Um Gulp file.gs uh, it basically Where you put all the tasks that you want to run like repetitive tasks and some defining some Pipelines uh that are going to be run and some processes that are going to be run with your With your sass and you're like watching gs and and images and twig templates Compiling and doing and browser syncing. So that's where all all of that happens Again, so for me the the most important thing Like those three, I guess three or four things were on the top there were the most important. So sass compiling obviously I wanted to have source maps. It basically shows me where my sass is coming from that partial That I want to target when I'm looking at the console like I'm seeing The partial itself not the style sheet where everything gets compiled auto prefixer Which is a great plugin and it's again available Like in other formats Like in terms of grunt and things like that Air notification without stopping the watch task. It's one of the things that have set up in that gulp file. So when you run um Your process you make a mistake in in in the creation of You know and just like forget a semi colon It's just going to complain pop up with a terminal notification You can do some crazy things like Well, not necessarily crazy, but yeah More edge case. I guess like you can clean the Drupal clear the Drupal cash from from gulp a theme registry and run like miscellaneous clean up lint beautify tasks from From that gulp file and then browser syncing. It's just where everything gets Reloaded and synced up with your Uh with your browser and other devices on your network and actually Let me show you some of these This is the the back to Just kind of to kind of to summarize the stuff that I've talked About in in part. So this is the package json file Just has some basic information about what it is and then I'm declaring all of these dependencies that I want to use On my theme so gulp low plugins just some helpers and uh gulp auto prefixer notified gulp sas shelf source maps and things like that so Yeah, as I said, there's plenty of things available out there The actual gulp file So It's basically like a javascript file. So I'm declaring some variables here on top that I want to use Down the road, uh, like I'm specifying that, um, like I I need the the gulp The gulp load plugin basically helps me with, um referring to Like all the dependencies And I'm going to call later with this dollar global dollar sign variable And so I don't have to list all the node modules that I like show you in in in that node Module folder in here. So some air notification here my main sas task which, um You know, what just uh does the sas processing? Does the source maps? Uh, like convert sas to css compiles things And spits out any errors does the outer prefixer And does the browser syncing so that's that's basically one task right there. It's like another task here For jas stuff like if I wanted to Do some image optimization I can run that Uh gulp images task GS hint like uh, you can do gs linting as well uh Or beautifying it's kind of js linting was was somewhat Difficult to do because like I was using other stuff Stuff from other people's library and I like I didn't want to clean that up. Uh, anyway, so Um compresses gss you can compress uncompressed things Again, not exactly You know, like Drupal's gonna do its own aggregation compressing anyway, so but I Kind of played with these tasks and kind of incorporated them there Uh running drush You can do gulp drush Uh, and it will clear the theme ring tree as I showed as I kind of talked about already Um, the browser syncing is where like my browser is going to watch for this For this url, which is my local setup The aid that dev you obviously have to change that on your system depending what what what your local setup is And so it's a proxy that watches for that And then my my default task is basically watching the Um sass doing the browser syncing Um and compiling again and watching for changes in the Uh in the um tweak files And I have because it takes a while to kind of set up everything I have just recorded some of this stuff in here I don't know if you will See a lot of this but Show this anyway So I'm in my terminal. I'm already cd'd into my theme Here I'm going to run the gulp task It's going to fire up the browser Um connect to browser sync So I'm going to open a inspector In here so like I say I want to uh Change one of the elements here Like that section it's pointing me to the partial Which is where it's coming from so I have that partial open On the left I can I'm just going to uncomment stuff in there The gulp is going to watch this to see get rid of the background in there. So Coming that back Save that gulp is watching for stuff. It's kicking in the the The reloading I'm going to make a mistake there say again as Forgot the semicolon when I was writing my sass. So it's going to complain there It's going to complain there It's going to make me go and change that back Uh or change you know add that semicolon And it's not stopping the watch task. It's still going. So once I change that everything is Um running So this is a A twig template. So my my page template. I'm just going to get rid of this whole section Um delete that Or uncomment that Save that so the gulp is is running the task so Automatically get rid gets rid of that first section So Comment that back save it again and add set back in So that's just some of the default tasks that I've set up I'm going to stop the gulp process and uh do specific gulp commands here. So gulp I'm doing gulp drush So just because I have the notification going I it tells me that it's cleared the triple cache um Do gulp images it's gonna tell me that it has gone and compressed blah blah blah since I've run it already like No compression happening Like some of these tasks. I don't want to be running every time on my watch task But some I can run them just running js hint It just tells me that Everything is okay So That's that's the basic idea of of this gulp And browser syncing watching tasks Let me go back Here so browser sync again is uh Allows you to test your side some multiple devices over a shared network By synchronizing url interactions and code changes Uh So It's it's basically injecting stuff like css changes just uh You know updates like as you saw it's it's pretty pretty instant and again like the compiling stuff is pretty fast with libsas And it also not only watches for changes in css like it's all the interactions So like if you're checking out forms or like just like your scroll events and things like that And it's going to watch it across your network. So if you have other devices set up for the for the browser sync Well, you don't have to set you once you set up the browser sync and like you can connect the same Like a bunch of device to the same network And it's going to be updated everywhere. So As of late it has the ui and ui basically is Um So my my local changes are happening on these local 3000 port my My dev is actually da.dev But I kind of actually like it because like I am logged in here and I'm not logged in here So this is when I run the gulp Watch task. It spits out this url because again, I've specified the da.dev as my the proxy In the 3001 is the browser sync ui. So you can see Like it tells me what what What port i'm on Like external external url the proxy and then there's some syncing options you can you know synchronize all these click scroll events Inputs and things like that Uh Yeah, I haven't really like explored this much myself. I guess you can mess around with throttling as well too. So You know like imitate the network stuff Just great for testing Okay, so I think Just to worry about this sass partial structure And architecture in general uh I kind of there's another way to kind of do sass Globbing or bulk importing of all your css partials for this one. I didn't really use Anything but I use this This tool called sass director which has a It actually has a sublime if you're using sublime it has a sublime plugin And it actually also has an old package as well I haven't just incorporated that into workflow into my workflow But the idea basically that you have you have to declare all of these imports For your partial. So these are given as an example so you would Basically, oops I want to be here. I just want to go back You stick them in here And It generates the if it does let's try this again Yeah, so it generates like a command line Make directory stuff and you know touch make all those files for you. They're just a nice little tool So, yeah, I think that kind of brings me to the end of this thing so As I said the source code is on github the demo is there on subtleship.net And that's it if you have yeah, if you have any questions I'm I'll be glad to if I know the answers to answer them Otherwise github again my zeta graph and I have a couple blockposts about the same stuff on the Innovation website Yeah Any questions Actually, yeah, um, have you had a good solution to clean off the unused css classes throughout a whole site? No, I haven't I haven't done that I guess Again for me for this one, I kind of it's more this was more of a I should say like a crafted Project so I kind of knew my structure and it's like I didn't want to use Stuff randomly or adopt stuff randomly, you know from other libraries and things like that Well, I guess I did in a way like I use that animate css stuff some of it is probably not going to be used but otherwise it's It's like I know What each of these partials is is doing and what what what is in in this? But I'm pretty sure you can There'll be like a gulp Plug in that you can incorporate into this workflow and it'll just automatically, you know, like we'll go and hunt those Yeah, I'm not sure. I don't know if I Yeah, that's a good question Yeah, that's a good question. I I am not sure. I guess I don't know anybody like here Yeah develop Yeah, it's Yeah, actually I have um I just tried and uh yesterday in the session, uh, so it was about uh, the twig stuff Uh, it was talked about briefly, but you you have a develop module and uh for Drupal 8 already Or at least a dev version You can install that Hopefully doesn't break anything Then after you've installed that you have this Kin stuff Yeah, I guess you have to on come in the whole thing Anyway, so You can see this basically you can go with with kin and look at the other variables. So beyond using that Drupal Drupal say debug features you can You know look into other variables that are available. So yeah Yeah Anything else? No Oh, yeah Yeah Yeah, so again for for this theme and I've done this The actual design like a layout for this for mobile like six months ago I think lip sauce was maybe at the time was missing maps So the point is that it's it's actually pretty easy to set up a mix in that will do pretty you know Like it will do what breakpoint is going to do but it's it's just going to be You'll incorporate that into your Like mixing like all your utility stuff. So Yeah, for this one too. I basically I do I do have that So if I I'm using this kind of the same syntax For Find a file or even here that I showed so add include breakpoint medium and I think this this is probably So all this just refers to like a breakpoint that I've set up all it took me to set this up is is like 10 lines of Sass in here And I think you can do it differently now because you with lip sass you can now use maps sass maps Not source maps It's different. Yeah, but it's just like it's like a key value and you define things and then you refer to them later So it's even like there's a cleaner setup But It's kind of same since obviously it's not going to be as robust as breakpoint, but It it does the basic stuff. So for a couple breakpoints that I need it Okay, I guess if there's no questions, I wrap it up and Thanks guys