Drupal 8 Theming with Emulsify 2.0 Part 2

[Music] I started the live recording so me think I have one more thing to open here and then I'm ready to go alright everybody ready alright just for my own knowledge who's gonna be brave and try to set up some of this stuff anybody okay sounds like you guys may have already set it up and stuff then so I won't go through the setup if you want to go look up the four kitchens almost five project let me open it up here if you go to four kitchens emulsify just come in here you know find the composer command go ahead and go for the emulsifies stand-alone just to get something about that and start playing around with it literally like copy and paste this command and then right after that you type your in start and you're going with emulsify so that'll give you the example components and you can start learning about how it works mess around with twig lanes in pattern lab if you don't know already that would be step one so what I did was I set up an aqueous dev desktop site Drupal 8 site that integrates with emulsify so you could see you know if you have any questions about the required dependencies anything like that you know this stuff is out here I have step by step instructions as to what you need to do a knock we adapt desktop to get it up and running the reason I chose a creative desktop is because it's fairly fast I could have gone with other methods to set it up locally but I take more time so I set that up here and what we're going to look at is a very basic Drupal 8 site that has only one organism within emulsify and that's an image gallery alright so here you can see that I had 6 images it's on a gallery page I went ahead and hid some of the other blocks that are normally displayed on Drupal but as I mentioned when you're building with the mole supply you're building everything from the ground up so all of these links up here they're not styled we're gonna have to figure out you know how you want your main menu styled how you want your navigation links styled this is these are the kinds of things you're gonna have to think about when you're building it so it's not for a small budget project right you're gonna have to have a decent amount of time to go through and customize everything as I mentioned though emulsify is hopefully going to be more portable and that when Drupal 9 comes out when Drupal 10 comes out the part of this that you're having to replace is that templates directory and the patterns and your components themselves are still working within pattern lab so that is the hope there that you know going forward it would be more future proof I think I should go ahead and show this to you instead of just running it so when when emulsify is installed on a Drupal site you'll do your composer require emulsify and then you'll run your dress install script I have a video out there I think it's actually the first blog post on the Portage's website right now it's called like installing installing a multi-word dress or something like that but it's a short ten minute video that shows you how to set up your new custom theme in this case we have custom demo so i named our demo theme demo and it's gonna be just like a regular theme right so you'd have themes contribs i once you have that installed you can run the dress script your dress gift would create your example theme we have demo within demo you would need to type yarn to install yarn which is like all the pattern lab stuff and everything like that after yarn yarn start and so let's say you've gone through you've set up your Drupal 8 site you've set up the theme and now you need to hand it off to your designer your designer just has to clone the repository down to their machine navigate over to your demo themes and type yarn start then they're actually given the URLs that are running your pattern lab instance so here this is my pattern lab instance I don't have very many components at all I did that on purpose to keep it simple so we could stay focused on just what's required for this gallery although we have colors up in this file I actually didn't use any colors one of the things you'll need to look at is within the base component directory we have global and then we have colors so in here you would find your sass file with all of your different variables that you want to use across your project part of what pattern lab does is it Auto generates your colors for you and so this is pretty much taken care of obviously like when you're designing a site one of the first things you'll think about is your branding how you want to color it then I included the grid component because for a gallery I wanted to have multiple images displayed in a grid I didn't want to just have you know a bunch of images going straight down the page I went ahead and included the basic links Adam so what I did here was I basically had my d8 site with my two themes I had the emulsified theme I had my demo theme and for you when you're starting feel free to just go in and copy and paste patterns out of emulsify so here you can see I'm navigating to contribute multiply components patterns within patterns this is where all of your components are going to reside colors is one of the first ones you would look at feel free to use our grid system I think we might actually have a PR out there right now that's going to change the grid system so you might want to keep an eye out for that if you're gonna copy this over to your new project you might want to look at using the open PR as opposed to using the ones out here right now and then as I mentioned earlier you're seeing a lot of numbers within our patterns is this readable nope all right I don't know that's gonna go bigger sorry about that you'll have all of your patterns feel free to put numbers in front of them so that when you're displaying it to the client you know you show them what's most important in each section in particular if you want to if you're building Adams with the client you know come in here go to view all look at the items on the project you can also view just one if you want to show them only what a link is gonna look like one of the cool things about pattern lab is it can actually resize this page for you so you can see what its gonna look like you know on mobile devices on smaller screens make sure that you didn't break anything you know all of this is done at the pattern lab level you haven't even dug into Google yet and then we also have like small medium large if you're wanting to test it out you know maybe a iPhone or like a iPad portrait you know iPads landscape desktop and so just copy and paste out of emulsify is where I was going with that you can start with the slim figure out what you want what you don't want a lot of clients that are gonna go with the most of I are probably gonna went to custom build everything so you'll be doing that let's take a look at a molecule so the atoms I just took straight from the emulsify project then once I got into the molecules side of things I'm like okay well I don't have a gallery item you know I have images now but the larger component is going to be container of these components so a basic component will have generally a sass file a twig file and a yamo file that's pretty much like the bare minimum required to create a component here is the add attributes usage so there's probably a cleaner way to implement this I did this very quickly but I just took our BEM function I created a BEM variable if you're overwriting a Drupal template then you're probably going to notice that it has classes set and you can do that within your pattern lab components also so I took all of the Drupal ones and then I added them to it one of the interesting things I did here was I took our add attributes function which just takes you know like the parameter additional attributes and I passed our class into it just so you can see how that's used but let's see this is a article if for whatever reason you wanted to pass a new attribute you could do something like you know when you could do bar and then on the attributes side of things this would be like through people's bar and so that's what the HTML generator would look like and as I mentioned this doesn't look like a whole lot but getting it to work in both pattern lab and Drupal required a little bit of magic which is our add attributes function so that's what I had going on here you know just the base class generally you'll be setting variables in the top of your twig file you'll be adding classes whether it be directly with the BEM function because if you copy and paste some of our examples from emulsify what you'll see is that BAM was actually down here more like this so the only attribute that would have been passed his class but by doing it through the additional attributes or add attributes function you can pass other stuff and make it more flexible I like flexibility a maintenance developer I don't want to have to go through and be changing a whole lot of stuff in both words right yeah so that's the key here is that it does exist within both worlds because it did not before and then you'll probably see this within the drupal templates you know just your standard attributes and then you can do add class you know whatever string since this is a molecule level you could continue to use like your Bend function here but in particular I had a block right so I created a block that I wanted to be able to replace later this is a super simple example that has only one element within our component but if you had five or six elements you would have five or six blocks and you could only replace one later if you went to what you're gonna see unfortunately and if you guys can find a better way to do this I would definitely like to hear about it but for now you're gonna see a lot of usage where it's still split between Drupal and pattern lab right you just have to have in particular when Drupal generates its components it'll grab the smallest components first right like your atoms would be generated first it gets the market but it brings it back and then it calls like the higher-level component and so you already have your base markup which is why you're going to see on your high-level components you're having to do this where you're just generating like the raw markup because another component has already generated it but the difference is that with it in pattern lab you're having to include the smaller level components and pass in these variables so you'll have to keep an eye out for that as to when to use which example I think over on over on our links we were able to get away with just a single set of markup and passed the variables into it without having to have that split between Drupal and pattern lab so what you'll see is on the higher level components you have to do that all right and let's see I left in here or is it okay on this example there's actually a bug I left it here on purpose so that I could tell you all about it and then you could keep an eye out for it when you're developing your own components here we have link attributes all right we are generating the attributes and the specific one I want to point out here is the href right is just at the home page and then we also have a link URL that is supposed to be displaying this URL but because it's passed in via the attributes this one is actually getting precedence and this one is being ignored so if you all start getting into passing in custom attributes from Drupal into pattern lab you might need to keep an eye out for is Drupal passing this attribute and am I trying to overwrite it within pattern lab in another variable so just keep an eye out for that and on your molecules as I mentioned you're gonna see a lot of wrapper markup but what you should not see is like base level component markup all right so you might see divs and articles up in the molecules but you shouldn't be seeing like image tags you know link tags header tags those would all be at atom level so you'll see I was using includes here I don't think I actually used an example of embeds but you can go look at other examples you're gonna see embeds when you start having more complex components right when you have lots of blocks I tried to keep this one simple I believe that we looked into it because we also relate well can we you know Nesta block within a block like two levels down and I believe the answer was no I believe that you can only go one level down on a block so if you had an organism you can only replace a block at the molecule level and you can't do it all the way down at the atom so actually I guess we are using embeds in our grid system so our grid system has a block called grid content and we replace the content with like for Drupal we just have great content which is just a straight markup and in pattern lab we have an array of images that we pass in and I'm just passing some custom parameters here so on your does everyone here pretty familiar with gamma files anyone worked with them before the pretty straightforward that have like a parameter and your value in this case we have an array it is SM indexed array at this point not actually sure but you might be able to create TD arrays here and then the modifiers is also an array and so in this case you have to create an array of strings of modifiers that you want to pass in at the organism level it looks a little more complex I think I skipped the molecule level in my example so the molecule level would look something just like this you know you'd have image modifiers an array and a string one of the things you should be thinking about with modifiers is the if you build your design system with like the theory of utility classes the class that I'm thinking up in particular is you might have a modifier that's called a gray right you want to make the background gray so do you create a class that's - - grey and just add that over to your pattern lab component so you can reuse it across all components or you know do you go ahead and follow them strictly and put you know your block your element and your modifier in which case you're gonna have to repeat the CSS a little bit you could probably look into using other mix-ins or you know like includes in your CSS to make it to where you don't have to actually repeat it but go ahead and think about utility functions to keep your CSS nice and clean and then modifiers would be the way to use it and here here okay you're actually gonna see a little red dot right here emulsify has sass linking built in so I think when I ran my generation earlier we actually saw that you know our style int here is throwing errors it's telling me you know I should not have an empty class right here so that's one way to keep it clean if you follow it you gonna break it like me and let's see so we were using dashes within our block name so the entire block name here is gallery item I was trying to follow the pattern name that I gave it at the directory level and then it had one element which was its image and I just went ahead and threw a box shadow in it did I not put it okay I do not have an example modifier here but it would look something like this you'd have your block you'd possibly have an element and then you would have your modifier and if you're doing modifiers as I was saying you probably want to do like some sort of include so that you can use it on other modifiers because generally a modifier is going to be something super simple and straightforward like make the background gray or something like that I did not put an example here but if you wanted to you you could duplicate your gallery the syntax is something like variation you know gallery filled by variation you give it whatever parameters you in a pass I found something kind of interesting that I'm not sure if it's a bug or a desired feature but I found it variations in Harriet its parents parameters so if I wanted to not pass this third image into this variation I would actually have to declare it as like a blank object I can't just delete it like I did here I'd have to do something more than long the lines of like that if that was the right syntax it would just be you know an empty item that's not generated later can you do just like all the animals they all have two tilde whatever so they're distinct pattern or distinct yellow files so they cannot apparent one that you're inheriting from I think you're basically just like that I think you okay you I think you're saying have a baseline but put very little in it or EV amazingly nothing in it and then each variation try it out let me know let me know I'm I'm interested to know that answer because right yes so you would put your variation if everything was working here then you would see you know is reloading the browser we should be able to scroll down and now you'll see that we have both a gallery and a gallery variation I didn't actually vary it but if I wanted to do something specific to this variation that's what's gonna happen and that's how it's gonna look and let's see what else dealing you to know about I had really wanted to dive into pages I just ran out of time when I was preparing this example but pages are definitely the way you want to go when you're prototyping with the client to show them how it's gonna look and let them think about it cuz the number one thing that I've learned is that people don't always know what they went until they see it and so once they've seen it they can help you change it and when you do it at the pattern lab level the cost to get it done is a lot less than if you had developed the whole thing with Drupal pages okay I was like I mean could you two blue wire kind of layout good question try it out let me know I believe that the answer would be that you're bypassing a lot of Drupal functionality and hooks and things like that if you try to do it that way but I am interested in the answer so you have time to try it out let me yeah all right so the pattern lab side of things twig twig functions are within both pattern lab and Drupal in this case you'll see that if you want to use a Drupal function there's a lot of Drupal functions missing so if you want to contribute to the project this is an area to contribute it's probably pretty easy for you to contribute these things and if facto be fast so make sure you're contributing to open source Apache Texas camp multiply you know feel free to go at it but this would be a pretty easy PR go through and look at the Drupal functions right there available within Drupal but here we only have two that are available within a multiply we currently have Kint and link the reason why they're there is because we have the need to include them within one of our components but if you don't have in our case like a PL hint then you can't use kids within pattern lab and throws big like fail error so if you're finding yourself getting a fatal error within pattern lab because you're including a function that's not defined you need to come in here to the twig components and define it in our case you don't actually have to even make it work the right way right you don't have to make it work the way that Drupal works in our case the link function is literally just returning a string right it's not actually generating a link or anything like that it's just making sure that pattern lab has something that it can return so it doesn't fail so it is at the Luci I'm in custom demo components right now so within your components directory you're gonna find all of your pattern lab specific information so you can add new functions you can add new filters right so here's our pattern lab tea filter I can guarantee you this is not behaving the same way that key function is behaving and rupal but it is working enough that pattern lab is not throwing errors and we can still get expected results within our component but if you find that the T function or something is not behaving the way you expect within pattern lab it's probably these functions that you need to come in and use so if you all are not familiar with it filters are gonna have like a pipe and then filter name and then functions are gonna be declared with like them you know and then your parameters you can pass into it yeah so the only thing we've defined here is just T you can see that we're defining a twig simple filter with T and then so you could you can copy and paste this create your own and so now you know the directory to do it in if you find that you know pattern lab is yelling at you that BAM or add attributes doesn't exist come in here and look and make sure that the BEM function was actually installed you know maybe composer failed when you were installing it and it never made it to actually clone the BEM function down so I think those are the main ones you're gonna be messing with we've talked about it back and forth as to whether or not we want to use the data JSON file because a lot of people within the community are using it you might become one of those people it's basically just a way to define parameters globally so you can pass it to any component you can also use these within any component if you don't feel like creating all of these within your yamo files I know that we made a specific decision to not use it within emulsify and I would have to double check on the answer as to why we chose not to use it but uh so that is there and it is an option if you want to use it there's some sample images you can pull from pattern lab you can probably put your own here I think these will only be available to pattern lab if you're trying to pass stuff over to Drupal I think these will not make it over to Drupal yes yeah so some people don't use yellow files they only use the data JSON file and so you could choose not to do the yellow files we're using it for just the components that's like all we're using it for is just that one specific component that diamo file defines it for that component and like I said if you want you can use the data type JSON parameters we could you just I mean you could add your own stuff to it yeah yeah you could just put whatever you want in it just kind of stuff in there and declare as a file where their words it's just one big file I think the way to do it would be to actually add like new let me see what is this I guess this is an object yes that you would define new your properties on the object and that's the way that I think it's designed to be used well there's two files you're talking about the list items so right probably like I said we we chose not to do it that way but it looks like Charles is saying yes you can add your own files and so yeah I think both these are available to you for any of your components if because right we're designing our own design system so your client might want things to look specific to them if you need to define like some header options within pattern lab specifically your living style guide you can come in here and change up here I think we've cleared it all up but at some point we had some errors because we were referencing links that didn't exist within Drupal or something like that so you might want to keep an eye out for that maybe something in the header and I think that's pretty much it for our components directory you know the main one that you will be living in most of the time is the patterns directory we talked about two components everything here the directory that you should be aware of when developing but it will more realistically be an afterthought is the templates directory most likely you're probably going to have a designer go through generate everything in pattern lab and then you're going to come back and generate everything within your templates directory to plug it into Drupal so here I just went through and I looked for some specific templates to override I made my pretty short you know include this file with these parameters and it works let me see if there's anything specifically worth mentioning [Music] probably not I mean most of this is just going to be you doing a lot of custom integration trying to figure out you know what's coming from Drupal and what goes in a pattern lab and then like what what variables are available within Drupal and do you want to make those available to pattern lab I think everything else was pretty straightforward I went through I went through and created you know my content types for gallery item I created a view for gallery the gallery is displaying the content I was playing around with it and decided you know do I want to generate fields or do I want it to generate them now I ended up going with the node because it matched pattern lab better in my specific instance and so you might be doing the same thing you might actually be changing the view to match what was developed in pattern lab and so when you're developing your component still just have to figure that out I think I had to do a couple overrides on my teaser teaser display mode because I was getting like this weird submitted by and the only thing I wanted was the image and then the end result was that I had a field image was one of my components and you can see that image displayed there then I had my gallery item which is just a container around it within my gallery item you know I could have put a favorite star I could have put the title I could have had any number of fields within that I just kept this one simple and chose to do just the image and then outside of that I had my larger organism which was the view that displayed all of my components and I think we're pretty much a time that's all I got for you thanks everybody everything that goes inside the width you know those variables mapped over actually you're reminding me I have a slide or two more with some tips on that yeah so is he okay we just dug in here's some tips we're using like the twig dump function to actually like see what was contained in there yeah orchids or something like that okay another option that I was playing with is the twig jump function pattern lab actually supports it but one of the things you need to know about emulsify is that emulsify pulls pattern lab in in the vendor directory so none of its committed it's actually like not part of your repository so if you want to change this you I listed here how you go in you're gonna find your pattern lab directory most likely within the vendor directory and then config and config gamal change twig twig debug from false to true and then you can actually use the dump function which I think I found a little bit easier to use than can't because if you have too much stuff in can't when it's super slow to load and then to you're like digging around having to find you know like the specific clean you want so I guess I think more in terms of like the dump function there were some additional resources so go to pattern lab bio if you want to learn more about pattern lab at style guides do right because you are developing a style guide that is the end result that is the goal make sure you keep that in mind throughout the whole process let's see I think we're talking about specificity thought that was a good article on you know how you should go through and name your components you know conceptually what you should be thinking about I gave credit to our most by 1.0 talk if you want to learn even more about emulsify and get some more of the basics that talk is out there I also was reading about some Design Systems component driven design I got the pixels off excellence calm and now that's it so any other questions yes you are gonna have to use Josh nine if you have great Drupal to the latest version which is a point for point out real good you should was broken because Josh eight is specifically there's an issue that says they will not support eight point four point oh agree because they made some commits that broke dress and it was something I think it's Symphony maybe and they chose like we're not gonna refactor the whole project to make it work on the 8x branch just make people upgrade to nine they're gonna have to rebuild like the whole thing yeah which they did in like men dressed nine okay but I think we did rebuild it alright thanks everybody thanks John is operating fabulous water so I didn't announce

Channel: Austin Drupal Users Group

Views: 620

Rating: 4.5 out of 5

Keywords: drupal, emulsify, design, austin, adug

Id: dddjRXnH9Sw

Length: 42min 0sec (2520 seconds)

Published: Wed Oct 18 2017