 Just out of curiosity, even though I'm not standing in front of the mic. Can you all hear me? Can you hear him? Say something something We're just gonna give a get started in one minute. Yes, sir. Yes Yes, I can So he was an operas when I was was am a opera singer, so he should be able to project I Was a DJ at one time so I should be able to project really well as well But he is right. We should speak into that. Yeah, great Can you hear us now? So is it time? It is time. So we're gonna go ahead and get started Welcome to the big easy streamlined front-end development with pattern lab and twig There's a bitly link to the slides. It'll be all in the last slide as well So not to worry So here we go So Who dat what they do? It's New Orleans speak So First we'll do some basic introductions My name is Adam. Drann. It's my Twitter handle Adam. Drann tenor I'm a senior front-ended developer at forum one and in addition to doing that. I sing opera and apparently jazz this morning and I also miss student of kung-fu and this is Chas Chumlee. I'm a technical architect at forum one. I am also a Drupal evangelist and in the meantime I like heckling Morton As well as being a disc jockey Actually a really well-known disc jockey, but only in my basement So we are both we both work for forum one form one is a full-service digital agency that crafts Solutions for the world's most influential organizations such as a Long laundry list of great clients one of those being global innovation exchange I'll be doing a business talk tomorrow on global innovation exchange It will not be about how great we are or all the great stuff we do But it actually will be about how great a client they are so make sure you come check that out so pattern lab and twig right as As the late great Victor Hugo said nothing is stronger than an idea whose time has come So we're gonna give here's the basic agenda and We'll just take you through Where how where we are now with or where you may have come from with pattern lab and twig and Drupal How you may have worked up until now what we call the big easy what we see as a huge step forward in Combining those elements. We have a great demo for you dish to proof of concept Then lots of time for questions because you I'm assuming hoping you have a bunch So the story so far we have pattern that how many people here have worked with pattern lab before All right pattern lab with mustache or pattern lab with twig Mustache mustache twig All right, a few people. All right, so I think it's most of you who have not worked with pattern lab so we are gonna have to show them pattern lab pattern lab is a Custom site custom static site generator that constructs. I cannot read today an interface by stitching atoms molecules and organisms together to form templates and pages its philosophy philosophy Parallels several core tenants of OOP with such as DRY don't repeat yourself and KISS keep it simple stupid Tell us about twig. I should actually have more and come up and tell us about a twig But what he would say is twig fucking rocks Thank you to it twig You can read the slide for yourself, but the thing about twig is it makes Drupal 8 30% more awesome and as I'm sure you all know by now Drupal 8 adopted twig as its templating engine And it allows us to more clearly separate the presentation and content layers So what does that mean? What how does this all work together? Well, we're about to find out so I Am actually just gonna read this the original version of pattern lab uses mustache templates and there's been a twig version for about a year and What's now possible is that you can have a twig a pattern lab starter kit with twig templates that mirrors Drupal's twig templates and Put that it let that sink in for a second. You can have the same templates So you could maybe make the change in one and have it already be changed in the other Yeah And so as you can imagine and this is what gets me so excited is the ramifications of this are Gynormous we can not only can we take full control of the markup, but we don't have to negotiate with developers You don't have to ask your developers. Oh, I need this class in this place or and then they do that and it's in the wrong place and It's a nightmare. I get so frustrated. How many how many back-end developers are in the room? Sorry, you need to find a new job The front-end developer The front-end developers the paradigm shift is about to take place what's already starting to take place The front-end developers actually have a lot more control Well, you know, I take that back you can still do site building So the hard way this is where I pattern lab lives Next to Drupal they Kind of interact like siblings. Yeah, like in the back seat of your car. Don't touch me. This is my side This is my side Like that. So these are the front-end development blues So you know how this works you Get clone pattern lab into your theme directory and you build out your patterns and your CSS And then you get to argue back and forth with your back-end developers. Sorry guys We do love you About how the markup is wrong Because here's the markup I wanted I made it in pattern lab first and Then it ends up in three different places and flexbox blows up and I have a nice Picasso Page has this ever happened to anyone here besides me Yeah, it's a little frustrating. I mean we have to work together, but it's frustrating. I get frustrated And so when you need to bang your head, there you go So but as it is said everything is hard before it is easy so this is the big easy the shared twig templates between pattern lab and Drupal and This is this is it can all work Simply It's not that you don't ever have to talk to developers again There are things to work out machine names class names But all that back-and-forth negotiating markup never has to happen again So let's talk about those easy ingredients are first of all We got a pattern lab integrated Drupal a theme and I want to give mad props to a lexie pebbles pebbles pebbles pebbles Weevils wobbles and they don't fall down If you take a look at his github repo It was a great starting point for us to look at and we had some talks earlier among some of our speakers and So We're actually starting to solidify that we're not being crazy going off on this big easy tangent Actually, there's a couple of other shops that are starting to realize this as well And one of those is how many people are here with the familiar with the gesso theme that we had for Drupal 7 Couple so we're hardly hardly working hardly hardly working hardly hardly working We're working on it for Drupal 8 The other thing to take about isn't with these easy ingredients is packaged dependency managers NPM power. Oh, and this one that we really need to get used to using composer. Why is that? It's the whole thing called Drupal. Oh, yeah How many people here use gulp? How many people here's grunt? Okay, you guys can fight outside of it So they're both task builders okay for running the development builds Generating pattern lab compiling sass Rebuilding the Drupal cache among other things So as Chaz just said we're building on Alexi people's work and You should definitely check out his blog his website. There's a blog And we'll have links to his github You can see all the work. He's done and there's we're gonna cover Various aspects of it a little more as we go on so Tell us about the architecture as well. Sure so Being a tech arc slash front-end Manager slash Drupal evangelist all these things kind of run around your head when he started taking a look at Drupal 8 while back And two things are really stuck out first all was How the front-end development team was utilizing pattern lab to be able to actually go off and Generate take the designs and generate all the markup all the CSS all the interactivity before we even had to worry about Doing any type of site building a light bulb and up. Wow. We get a big jump start on this Then came along the ability to actually take pattern lab put it in the theme as well So now you actually are mirroring these two things so that you had pattern lab Which was using mustache at the time along with Drupal 8 and twig and until along came pattern lab with twig And now we have a perfect marriage between these two The next thing was a starter kit that Alexi actually generated was diverging kind of from What we actually realized we were supposed to use because we have our pattern lab actually inside our theme and we Use the source directory which we'll see her in a little bit. So we started diverging from his model which actually had Because a starter key you can drop into anything you want You don't have to worry about the other structure there with it But with the challenge with that with a starter kit was it wasn't really kind of normalized from my mindset We wanted source to be inside the pattern lab source. We didn't want it to be outside We didn't want to have to generate some additional things nothing wrong with that method by the way But we actually normalized this a bit to bring the directory structure back into pattern lab where we were used to working with it So as you can see from this diagram on the left You have a directory structure for the Lexi's Shiloh theme on the right our big easy theme and the biggest difference is that he has a Starter kit which is parallel a sibling to pattern lab and inside There's a dist folder and dist is basically the pattern lab source folder And because we use gesso as our main theme at forum one And we use it as a base theme We just saw this as just an extra layer of Complexity so we moved that we got rid of the dist we moved it back as source into The main pattern lab folder as you can see on the right side So that voodoo they do so well There's actually two really cool key components this I'm gonna kind of flip around flip isn't actually in order of the slides here but first is a few patches actually the pattern lab and the pattern lab twig version that actually helped Kind of bring these two more in line by utilizing something that's called a data transform plug-in So and how many people have been doing any type of theming in Drupal 8 so far Okay, so so you're used to using attributes right attributes dot add class That's we start at attribute and so those are generated You know in Drupal as well as you can add to it as well But what if you could turn around inside of twig and Actually utilize those same attributes twig inside of pattern lab so what if you could Use the in the JSON files for any given twig template and have your attributes and Inside of that and then get have those pass have the JS JSON excuse me pass those attributes into the twig template on the pattern lab side be the exact same structure as what PHP is passing from Drupal into the twig templates on the Drupal side If they mirror each other The syntax can be identical with the data getting passed in as it is identical the template can be the same Mine blown so Better than Tabasco Maybe I love Tabasco, but it's actually the secret sauce the data transfer plug it so now We're going to have a demonstration and show you how this all works Any terminal window users? good You're like what the heck is it? So a couple different different things real quick so Imagine Pattern lab the way that you would actually generate okay I'm just gonna run through a couple different things here Those things are going to be actually going into the pattern lab folder itself running composer install And we're in this case since I already have installed composer update make sure there's any dependencies that need to be pulled down Then jump up a level run npm install and bower install as I'm running these I'm gonna go ahead and talk about a couple other things So let's take a look real quick where we're at Let's actually go into pattern lab. I sure can Is that good? Can y'all read that? All right, so composer. Hopefully you're already utilizing composer. I'm finding people who use drush Okay, so obviously you had to install composer at some point It's actually be able to get drush working with your Drupal 8 instances. So Composer is just a dependency manager. It's actually going and updating some dependencies right now for me Or it's actually going and taking out look out in the internet interweb so to speak and hopefully the conference Wi-Fi will Play nicely This is more Morton said you should have recorded it. I know all your tricks by now So now I'm gonna jump up a level okay, and I'm actually going to run npm install mouse cursor is All right, so npm install is going and grabbing any the thing that I have specified in the package that json file Yep, why that's running real quick for those that maybe have not seen pattern lab before So I'll let you go and talk about that. So we recently relaunched the forum one website in Drupal 8 and this is the pattern lab for it and pattern lab In a nutshell allows you to More than just style guide it allows you to create I'm just gonna scroll here you can set all your basic colors fonts all your Block quote everything is already so anytime someone uses a block quote. This is how it's gonna come out anytime All your basic, you know lists But it gets way more complicated. So you have a numbered list you have filters Tables you can have a pattern for anything that you want. We have a version of pattern lab for gesso that covers all of the basics and then we add Images image styles that we're gonna create image styles for in Drupal So that we can see how they're gonna look and then we can bind them as we go down with here What is this is the whoops article byline with an image and The person's name and their title and you can see that we went from individual items like a color or a font or A list and now they're starting to come together in various combinations as molecules and organisms this is exactly what Dries was talking about this morning in the Dries note and Everything gets built out here and another way to view it is up here we have you can look at the dates and There's actually a way the color coding there's red and there's yellow and there's green and you can actually use it for either internal or external approval so that as Things get approved you change the part of the file name so it gets to say whether it's In progress in review or completed and so that it will change from red to yellow to green So just by looking at it. You can say oh, yeah the short date. That's not done yet But form items, I mean this was done internally so there wasn't that process, but it is possible Layouts so you can look at this place we layouts for Just so that's a pure layout so there's nothing really in there, but that's more interesting stuff You can see that the home page. This is made up of different atoms and molecules and organisms that are earlier This is pure just an HTML generated Mockup really and it can be used For client approval they can see exactly how it's going to work one of the other my absolutely favorite thing is you can test responsiveness so beautifully you can see there's slide it this way you can see that things work at any given width or You can just click. Oh, you want a random large size or go full Pick a breakpoint here. I can put in 999 Just like that that's pattern a lot of it is an awesome tool and you can see why we like it so much I'm gonna flip back over terminal. All right. MPM is done. Let's run event run power install So bar install is actually just gonna run and pollinate any dependencies For anything that I'm using for theming purposes For this for example just grabbing bourbon need most cases, you know again not dictating how you guys work You would use whatever you're comfortable with okay, but it's a way It's a package manager as well to be able to pull in those particular components Once I actually have that done I can go ahead and run gulp Gulp is actually looking for sass changes. It's looking for it's generating the pattern lab itself And as that is sitting there listening for different events. Let me actually show you what that gulp file looks like We've actually modeled us originally off of Alexi's gulp file, but I've actually cleaned it up quite a bit And if you're not familiar with grunts or gulp, just think Everybody see that good better It's just a way for you to be able to have Processes running in the background that are listening for different things and doing specific actions based off it So in for instance here patterns change. I'm listening to see if I've changed a pattern Adam molecule organism inside of pattern lab and as so it'll actually go ahead and copy those patterns as well as run some a couple of other things to Generate the CSS from the sass as well as also go out and clear the Drupal cache for me If there's a template change that needs to take place This is a great way to kind of automate the friend in ops for you All right, so now that that's running. Let's go ahead and jump over to Drupal quick so in Pattern lab itself for this we have a particular layout Okay, they're really basic simple header. You got a menu item. We have a fork home layout here of speakers So what happens? It's actually not for columns. It's flexbox. I got your flexbox So this is what it looks like inside of Pattern lab or no, I'm sorry inside of Drupal when you have actually enabled the theme so Let me back up real quick Under appearance if we actually go to enable Bartek this is Demo gods bit me right now. This is actually what it was what it would look like without You know it's not using the lovely everybody like Bartek theme, right? What you should like is the fact that it uses classy Does everybody know what classy is everybody know who built classy? If you like it more and if you hate it he said John So basic Bartek theme out of the box. Okay, but when I actually go ahead and turn on The big easy theme and set this as the default And go back to the site It's picking up exactly what was in pattern lab over in Drupal and by the way It did this without me actually touching a twig template in Drupal So what would happen if we went into pattern lab and changed? I think this is an h3 or changes to an h4 for the the titles the the names what it would happen if we did that No, no, you want me to do that? Yeah, okay? All right, so let's actually go and jump into pattern lab. So pattern lab source. Okay patterns This is where the actual patterns are taken care of okay atoms molecules organisms templates and The Drupal templates itself are sitting down here under templates layout and patterns Okay, so if I actually want to make a change to this All I need to know is actually where to go So under meta I actually have no speaker teaser Okay, again, this is not in Drupal. This is actually over in pattern lab We'll see what happens here when I make this change. So right now it's an h3 change that to an h4 I'm gonna hit save. Let me flip back over to go up so you can see what's going on. So it's detected the change and There we go It is generated pattern lab and it's actually gone in clear to cash So if I go back into pattern lab first and refresh Hmm, this one change Well, it's definitely an h3 now. It's an h4 now the h4. No, all right. Yes, and Drum roll it. What is it now? What is it now? It's still in each? Is it in h3? It looks big enough to be an h3 Hmm H3 I haven't refreshed page. All right, and now it's an h4 made one change in pattern lab The process is in gulp made sure that that same change happened in Drupal and so you can extrapolate that I mean, that's a simple change h4 to h3 But any change like that is possible adding a class adding a div adding any kind of HTML structure whatsoever It can be done themed in pattern lab And those same changes in the structure will get over into your Drupal templates so I was expecting a whole more life. Did you all follow that? Yeah So are you as excited about that as I am? All right, cool. The theme once Yeah, so We're gonna make a couple small other points and then we're gonna open up for questions because I hope you have some questions So first of all forum one We are looking for front-end and back-end developers junior and senior level. We have a great team Yeah, they actually let us play it's fun So please come talk to us afterwards or we're downstairs in booth 406 Also here does what these will be in the slides There's some some important links to Alexi's work to first of all to the standard pattern lab I think there was some updates to the second one the Drupal lab there on github by phase 2 Alexi's work on the Shaila theme There is a pattern lab chat room on Gitter It's up there and then some links for Gesso We're gonna be doing the Drupal 8 work and Gesso is coming out as soon as possible We're as you can see we're at work on it and we're gonna have What you saw tonight this afternoon? Hopefully available for open-source sharing and all that jazz within a month or so So questions and we can go back and demo lots of different things. Yes, sir come to the microphone, please And anyone else who has a question if you would happily line up at the microphone hey my name is Derek and Just wanted to say thanks. This is like really really freaking exciting We've just kind of been like a brainchild brainstorm We've been thinking about and looking at for a while not with pattern lab but Reusing the templates between the prototype and the style guy and actually in Drupal. So awesome. Thank you the question that I have is Where are you declaring in Drupal 8 we've been looking at doing this in Drupal 7 a little bit in Drupal 8 Where are you declaring those templates that live inside of the pattern lab directory? Where are you declaring that they exist? So that's a great question. So if we actually go under and look under organisms There it depends on what you're actually building. So in this case falling based off of Alexi We're gonna be doing a lot of rearranging on this But you can see under organisms. There's this metafolder and inside here Anything that it sees and pat that It's seat note of notes. This is in pattern lab that has dotation on that twig when gulp runs If it sees a change to that it will notify Drupal and actually pull those over into the templates folder on Drupal side for us So we no longer have to like copying them. It's it's it's doing a copying But it's no longer am I having to actually go look the pattern. Yeah Copy the code out of there go in the Drupal make the template Hiling it and say right I can go straight over into pattern lab in this case for speaker using a teaser display mode You have to have a little bit of knowledge obviously Of what twig might call that template and you turn on twig debugging You know and and get a better insight into that But if you you know if you can take the speed it up even more buttons But if you know in this case, I just created no dash dash speaker dash teaser, but that's not really the magic I mean we can undo copy and paste right well You just have it like and look directly in that directory for for the templates rather than having to copy it So if you look actually so if you actually look here I have node speaker teaser, which is actually extending such using twig extend to actually extend that But I can also use the data transformation plugin to actually pop in additional References in this case the atoms speak to speaker image into the field speaker image field So it knows exactly what display in Drupal or in this case field company for the company name I can pass the classes using attributes for the class in this case node no dash our speaker and control it all in pattern lab So as the front end developers, especially if they know how to do any type of site building and all they're already gonna have These correlations running in their head. You're like, I don't even worry about over here I'm gonna do it over here And there's a build document for the site builder the developer to just go build out the content type when the content It's diamond and the theme is on it's already done over in pattern lab And it's already gotten pulled pulled over automatically into Drupal. That's brilliant. Thank you so much. Thank you Uh Sometimes your pattern lab patterns might need to have translations or links in them How are you handling the basically the the trans function and the L or the link function in the pattern lab patterns? Yeah, that is a awesome question and something that we haven't even considered yet Like we said, this is an early infancy of this concept But it's definitely something we're gonna need to take a look at because we partner with like lingo tech to do Translation on stuff all the time. So it's definitely a concern It's a it's in the Drupal lab repo. They had posted at the end there. We just got it in yesterday. So Did you hear that? Translation is now in there so we can actually pull this in. So all right. No, thank you. Thank you for bringing that up Hello. Hi John So with So Drupal 7 is was basically impossible to reuse templates because we had tpl.php Sort of you just couldn't use them. They were awful templates With twig we have a System that is did not come from Drupal so it's this this problem of how do you use the same template in your style guide and Inside your application, which is Drupal in this case is one that's solvable by just using twig and So there are two ways to solve this problem using twig and one is that you you use the exact same file And it's read by your style guide generator and it's also read by Drupal right and what that means is that you have to pull all the Drupal bits out of your Components and just have pure twig That's the route that I've chosen to go because it's really simple and you've decided to go with Doing this data transformation and compiling it's way harder and I'm wondering why you decided to do that It's more more complicated convoluted and Would require me to like have to write PHP if I want to if I have any problems with the way it works I don't know that you have to write any PHP. It is more complicated I mean we talked a little in the hallway and you said use what KSS note for yeah Which which I've not tried yet, but I'm actually now very curious We've been using a pattern lab in Drupal 7 with Drupal 7 for a while for For exactly what we showed what I showed you earlier with the forum one site I've been doing that for over a year now with with a The pattern lab version for Gesso in Drupal 7 and it allows me to Outside of twig Because we're using the mustache version to completely componentized The entire website and how I think and so for us it was just a now that there's pattern lab for twig Drupal 8 and twig It was just a natural next step if there were Other avenues we haven't explored them yet. Did you have something? I think no no I really feel like you could I really feel like you could simplify your your pat like continue use pattern lab Yep, but simply by the way that your workflow actually is by And this is like super new idea that I just started doing three weeks ago Yeah I'm gonna have a couple different buffs about that this week, but Well, we'll be there because yeah, yeah, yeah, yeah, so twig is super powerful and I think that you can simplify your process just by yanking out the Drupal bits and Then leaving them in the HTML dot twig file and then creating just pure components using vanilla twig And then you just route the Drupal variables then Into your components rather than trying to do these data trace formations. We have to write php to do that No, okay, you just write twig right it's vanilla twig. We will be at your boss and we can No, it's but thank you. It's great great points We're actually doing something super similar as well Phase two and red hat. Yeah, we're doing it in D7 though So it's really cool to see the implementation in D8 I was curious how you go about and stanchiating the fields in Drupal does your Json actually define the fields and do they Show up in Drupal, but there's the field right there So do you have to do anything else to get it to exist in the database? No, I just got a print out content and the content attribute here Actually, we'll bring this actually into the twig template. Do you mean on the Drupal side or on the pattern lab side? Oh, yeah, I mean you're still doing your developers still doing site building So they're telling you hey or in this case, we have a lot of front developers that we're like Why do I need a developer to work on that because I know how to do create a content type and Especially a Drupal a everything's fillable. So it makes them much easier where it's a content type Well, it's a paragraph bundle whether it's a block Well, we're actually so we're using the paragraphs module We wrote something called pattern builder importer that watches the Json Files and imports and creates those database fields and Drupal And make sure that they reuses them properly if it already exists But we can define all the same like components and reuse them in patterns and combine them in different ways So yeah, right So form 1.com which we released in Drupal 8 anybody want to guess how that was built That's a giant node with paragraph bundles. So everything's componentized Yeah, every and every page on the site is like that and and and yeah, I mean there's a I'm sure there's two schools of that some people hate paragraphs some people love paragraphs But it paragraph bundles if you haven't worked with it Really kind of works hand-in-hand with pattern lab as far as how you would might to componentize things and I don't know about you But like I hate field collections All that other stuff Questions, but I wondered if you could show the admin side of it to like if you're editing The admin side of like with your actually content editor and you're managing a piece of content. Oh Just Just looks like you would any other content type. So there's the speaker content type There's field company field speaker image So as long as the front end developer is this is the only place where they actually have to communicate with you back End developers still It's kidding As long as I know what the field names are in this case. We have node speaker No speaker teaser twig that is say that three times fast That's extending the hional twig template, but we also have a JSON file So as long as we are utilizing JSON and passing the content with those field names We can put text values in there. We can reference other Patterns inside a pattern lab itself in this case an image So that it then pulls through and then those actually are just getting written You know back back into here as well. So Yes, yeah into the bike, please What was that one more time so is the work being duplicated so when the when the contents being entered into the admin area It's not dynamically creating variables or anything in that JSON. So no, that's not manually right now. It's manually Yeah, okay, so here's the thing. Let's let's take pattern lab out of the whole equation If I want to create if I want to create a twig template for a specific page I number one have to know what Drupal is using to display that content If I want to override core not had core override core Then I need to make a copy of that into my theme make sure I use one of the file name suggestions So that process you have to do already. So what we said was Well, why do that process why are the front end developers do something similar especially if it wouldn't originally was a mustache Have them do it in twig. Oh, how can we marry the two together and have it so that once I once once that Template exists already in pattern lab just cup and in fact I'm having some brain thoughts about based on what John I talked about We probably don't even need to do that part because Drupal doesn't care where the twig template is as long as it finds inside your theme So I think I might just eliminate a step. Thank you John So as you're limiting that that step yes, you may have to do it first in pattern lab That's copying over now. I'm just if I want to add a change of heading like you saw We'll add a class following an additional markup I'm doing it over in pattern lab with a front-end developer has full control over it and the clients generally seeing that before they even see What's happening in Drupal? Gulp runs now. It's over in Drupal. Don't worry about it. Thank you All right, please sorry I got my speaking time. No, so I'm looking at it and I owe that looks all good But so one of the things I've been experimenting with the last couple of months actually ever since we reorganized All the file structures in for classy and all that core was and I see this file structure is very Specific is there any way of mapping yourself out of it? So let's say I come in with a theme that is that map Doppler complete other way. Is there any way of like saying hey My where do I my file slip? Do they have always to live in this file structure? Can I break that completely and move stuff around as I want to? So talking about the file structure for pattern lab or for the theme or for all of it But it's like do we end up having like two different ways of thinking? Yeah, if I begin to reorganize my stuff Do I end up getting caught up in this is pattern lab structure fair enough? That's if we know that the rules that's what we tell people One second there is a config YAML So this is the for pattern lab the config.yaml which is showing for example the public directory the source directory Whether you're using twig auto escape to a debug and Style um, no, where's other things? Oh, yeah, you can twig debug inside a panel if you really want to But it but the actual structure what you're asking. No, it doesn't matter at all I just drop in however my theme is yeah, and then we just roll with it Then it that's the power of the starter kits is that you take your theme However, it is and you drop in your starter kit and you need patterns which are going to mimic what you think Drupal is gonna Be giving you so we're not gonna have issues with people coming in saying hey I built my stuff this way and all my files are living over here and my image files It's living in the same folders and I do in these things and those things and I can like pretty easily import that that Structure that structure should stay intact You put you bring in pattern lab inside your theme root doc root if you don't want it in your repo Get ignore fine same thing if you're gonna use a starter kit to to have this all work together So yeah, it doesn't care it doesn't care how your theme is built So we can actually end up opting out of patent. I'd be like no I want to use a paddle up to because battle up to is way more epic or somebody else pull something completely new So you don't end up getting caught up in the system. They're independent pieces. We Hey, I'm really excited about this concept I'm looking forward to implementing it where I work and I just had a couple questions about the compiler that you're using from pattern labs dot IO it suggests using compass and I see you're using gulp and I just wondered if there were any drawbacks So we we're Either quickly Moving away from compass Just because of Ruby dependencies on compiling so we use lip sass so As far as gulp versus grunt It's apples and oranges. In fact in production. We use grunts JavaScript task builder Just because we have some a lot of other things with our vagrant instance on our virtual machine and doing things like actually installing those dependencies and building them more magic I Did that on purpose That too In the life short answer. It's dead. Any other questions. Yeah, okay before We go Gotta think of some good questions. So I I just released a triple eight deeming with twig look That's available. I actually have one two three. I have six digital copies here. I Mean I could just head up to the front and you guys can open up your computers and just pass it all the way back to you but Obviously not in it for the money. I'm going to get back to the community. So Help me think of some questions here What is more Who said that yes Very specific answer. Yes Come get the digital copy BAD a 55 in case and no one heard that Last call for questions, are there any more questions in the yes, sir come on to the mic Yeah to the mic, please My question is basically just in pattern lab in general as using it as a Kind of a mock-up tool to show a client Do you ever use it and like fully style it? Using the CSS that instead of just showing it as a black and white kind of wireframe Do you ever go all out with full style and then like host it somewhere so they can take a look at it? Yes Yeah, that's it. That is how we use it. It's a it's you all components fully themed out Components brought together from molecules organisms to templates to pages and what gets reviewed by the client I mean it the the components I review with the designer and the UX person So like components you can go access our pattern lab for form one right now just by going to themes just a pattern lab Every single component that needed to be there. This is the power of a pattern lab is I don't need to create it PSD photoshop Sketch whatever you're using pages for every single thing because if you really take a look and break down a site It's reusing Yeah, the button. I mean, this is a special button probably because of the icon Button button register, but all the button styles are gonna be the same everywhere But what we show the client though, of course is gonna be The D the individual pages they're not gonna Often they're not gonna make as much sense of the actual components the components are more for internal review Because once I as a front-end developer get my designer to sign off on a component when she comes back When if she wants off on one comp, this is 10 pixels that way or 10 pixels that way I make the executive decision and it's like she's already signed off on it. We don't have to waste time It's not a pixel perfect anymore because more general rules I was I will frequently go to my designers and say let's pick a generic margin So like so in the right column, what's the distance between pains? Is it 20 pixels or 40 pixels of the 4m's? I don't care But that's gonna be standardized and I don't care what's in the comp if she has three different items in the right sidebar That's the gutter between them right right. It's general as much generic rules That's what patent lab really helps to enforce and it helps the designers understand They see it and they go. Oh, this is someone you know because they're just dumping stuff sometimes in the PSD files Yeah, and but it's it's if you're a completely Pedantic like I am when it comes to front-end development I want as few rules as possible I'm going for the fewest lines of code the fewest mark the smallest markup and the easily Most easily maintainable least breakable by the client I mean all of these things go into how I envision and pattern lab allows me to execute that and test it and then it's done almost never Is something that I build in pattern lab a month later further in development break Because you've thought about it in individual pieces so you can go from having kind of a black-and-white thing This is what we're generally thinking then actually show them full design and then when you're ready to actually put it Into Drupal just kind of use that same CSS that you were already using and just kind of dump it in yeah And it same selectors well exactly who's using the same CSS that pattern lamb is because it's inside our theme pool Oh, so you just told it to look in that CSS as well. Well, it's the same. It's the same CS and Drupal 8 That's what we're showing is it's so much simpler Drupal 7 I have to use you know display suite and Panels clean markup and all of these other tools to really you know Massage the markup to get as close as possible to what I did in pattern lab and sometimes it's not possible But in Drupal 8, I mean that's that's the magic here is that it's the same right? Yeah, thanks. Thank you. Hey great question. Here you go Next question hey, my name is Rob I the oh Hey, thank you. Thank you. So so pattern lab. It was originally written in PHP. Yeah, someone ported it to node.js So are you using the PHP version here pattern lab or the node version? Is that we're using the PHP or the note at the node.js version? I'm pretty sure it's the node.js version Yeah, yeah, yeah NPM install and all that right right. So people have done some work to port twig over to Node as well. So what kind of parody is there? Is there any way that we could use? The node version alongside the pH. Is that just kind of crazy? Am I going into? Alien territory here. Yeah Totally worth discussing and we hadn't thought that far. Yeah. Yeah I don't I personally So it's the PHP version that you are installing into the team here and then no, this is no JS. Okay. Yeah. All right Yeah, all right interesting because you were running installing what we're installing with composer at that point then So when you first install pattern lab when you when you actually go to the get re-pumple pattern lab down You would run composer install So I should go and grab all the dependencies that pattern lab needs and then pattern Actually has a generator inside it. So it's behind the scenes is actually doing PHP core See, I see. All right. Thanks. Yeah, you're welcome So you mentioned the one of the benefits of this is being able to get to the The front-end portion of this earlier without having a site building portion is there and you mentioned clearly talking with the developer to Talk to see field names, etc to make this easily poured over How do you handle that from a front-end perspective if I'm given a project and I know nothing about it Do you spec out those field names ahead of time and then give that to the front-end developer or yeah So so as a tech I'll put my tech arc out on real quick So as a technical architect, I would meet with a client We'd have a kickoff meeting through that duration process whether it's content strategy whether it's UX we start to form a picture of Identifying what content types what fields should be with those content types and then I would actually generate or another tech arc Would actually generate a build document that is simply really just an Excel spreadsheet Or a Google doc and whatever you want to where we want to use that has the content type It has the field listings in there the other things as a tech arc would be our responsibility to make sure we look at see Drupal 7 we're more field independent meaning we really be specific with our fields The way with configuration management actually works in Drupal 8 now We actually really try to reuse our fields because I don't want to have a hundred field twig templates I'm sure Morton can can can agree with that one So we'll reuse those fields across but those will all be identified heads So we'll know hey for instance for the speaker speaker has a name a bio an image the company Oh, and by the way that bought that image. I have a fall for the content types gonna use an image field They're all gonna look the same meaning that it's a file a file upload for an image And I can create whatever display modes I need for that to have them be different sizes Use breakpoint whatever for responsive points to make sure your different image styles load So I'm gonna reuse that same field image across those five content types as well So hopefully I don't yeah So that basically means that you're dictating what the components are before it hits the front end No, the client's dictating what the what should be there through the through discussion with them of what's what that Content looks like in a wireframe more likely and what fields that the content strategist has identified from there Yeah, the machine names for the fields. Yeah But I mean, what are you gonna call field image besides film image, right? Okay, cool But the front-end developer can go ahead and build some of those out ahead of time If you have to change it in the twig template to change from field image to field featured image I mean just because that's what the dev named it. That's not that big of a deal You've already themed it. You already know what it's gonna look like. You're just changing a class name. It's not maybe the file name It's not that complicated Yeah That's right there you go sir General question about pattern lab. So when you're building these out for the client or for yourselves the components The atoms the molecules and the organisms You know, are you building them page first and then kind of dividing it out back backwards or Myself. No, I actually Prefer to work with the designer. I get basically a style guide and I theme that out like Like this all I start I literally start here with the colors and then the fonts and then I work my way Because once I get my way down all of these basic things there's form elements in here and That begins to and where the form elements do you go through the form elements? Because the components inherit from the atoms form the lay out there we go molecules inherit from the components and That's you know, so Generally try to start as small as possible because you're building on top of that because you're just not just like going shopping Okay, I already know already know my apple my orange and I look like I'm gonna make a fruit salad I'm just gonna grab the apple already had in the orange already had and there I got this search bar It's probably a little high because there's probably a container around it that it's expecting. That's not there but You can see that so all of this stuff the pagination It's all can be themed before you even look at any Drupal install, right? You still and then then I usually go from there to the header and the footer Make sure they're responsive using all of the great tools here In in pattern lab so that all the response so that I do the mobile menu I do all of that stuff and then you start off with a couple your teasers that are gonna show up in view modes your basic then your your node your detail pages and Then landing pages home pages come last You know and then usually there are repeated blocks or panes in the right column I'll do those as individual things as they come up in the pages But I but when I get to the pages I already have the look and feel the site Permigating and it's already in Drupal too, you know because it's that's even in the Drupal 7 stuff before We forget we really need to make a point this please hear the slides again and Please please please you can either find our session on the Drupal con site or go to this bitly link Decon dash big easy dash eval, please Please evaluate us Hopefully you liked us we had if you like to evaluate us if you don't like us. My name is Martin. This is John all But thank you We had so much fun. Thank you for coming and if you have any other questions just come on up Thank you. I have two more whoever wants to copy my book. Just don't kill each other coming up Oh, there you go right there Hey, thanks. Sorry. She wants one