 Welcome to choosing the right front-end style guide workflow for your project otherwise known as the longest session title ever We're gonna be talking about style guides today. This is really pattern libraries front-end style guides. There's lots of names for them I'm Aaron. I work for a company called for kitchens in Austin, Texas and Rapidly growing all over the world now with our team. I'm a creative director and partner there. That means I work with our designers and creative team and UX team to you know Come up with the right workflows on projects do QA work You know, it's kind of set that a design process for our company as well as doing sales things like that for a company So it's not an overly technical Presentation it's kind of to give you overall kind of intro to different style guides and approaches And there are tons and tons of resources for further reading later So let's jump into it So You may or may not be familiar with traditional style guides a lot of times they're distributed as a PDF some marketing agency will come up with them Back in December this thing appeared on the internet. It wasn't officially released by NASA, but it was the NASA Style guide and this is really exciting right because NASA is awesome And we all like spaceships and that's really cool So we were really excited to see this thing get kind of leaked out into the public You know every kind of tech blog kind of picked it up and was showing this to people As you can imagine it had kind of the typical stuff, you know, how to use their logo how not to use their logo What colors NASA likes to use kind of the different type typography treatment they use in their different materials How to talk about NASA in brochures and print materials how to create NASA business cards and other stationery They wouldn't even went so far so show you how to put the NASA emblem on You know the tails of planes and other NASA vehicles in their fleet really cool stuff and There's one page dedicated to electronic media Right. That's pretty exciting Finally we get to see you know, okay, we see how they do all their print materials That's great Let's see, you know how they build their websites and you know how they approach online branding and awesome They even provided two links to go to these resources, right? So awesome links Both of those links sent to send you to a page like this, right? So, you know if those two links were out of date and just sent you to dead pages, you know Like who knows what else in that guide was out of date and you know was no longer current and you know What version were they on and what's relevant like there was no way of knowing? So It's something back in time a little bit back to 2012 Starbucks in the announcement that they went responsive and this is a really big deal because you know starbucks is a really big brand global brand And you know back in 2012 Responsive was still kind of in its early days So, you know for a major brand like this to go full responsive with their online property. That's really amazing and Then this other thing kind of leaked out that they you know in the you know web Design community is a style guide for their new responsive site Wow, this is amazing. This is like Willy Wonka like Grabbing you by the hand and taking you through a tour of the factory, you know, they really kind of opened up You know how they're building this whole thing and it was really complete It had typography buttons their whole grid system how they build page layouts You know navigation media forms like you could build any kind of you know Starbucks or franchise page or any kind of online property just using the style guide that they put out there and Though they didn't have the open the source code available to you, you know, it was easy enough to dig through it So that's really awesome So, you know if you kind of look back to this NASA style guide that they put out there You know, it was dead on arrival, you know, we had no way of knowing You know, that's a dead style guide. What you really want is a living style guide something That's online anybody can access anytime and it's easy to up, you know update and keep, you know, current So you might be asking, you know, why why create this? So let's just go into a couple specifics, you know, that those old PDF old style guides their PDFs No way to tell what the latest version is hard to distribute hard to keep up to date Impossible to document, you know, you're using PDF to document, you know web guidelines And that's kind of dumb, you know, and it's impossible to do web interactivity So, you know, let's just throw all that out You know, what you want for a living style guide is, you know, it's gonna immediately provide team-wide, you know Education everyone in the organization will be able to, you know, contribute to it They'll be able to read it teams will be able to work together better You're gonna have design consistency This is a screenshot taken from a bank website and these are all the different buttons on the website And you can see how it's just a giant mess and it looks horrible So, you know, one thing that you have a style guide is you have designers and developers working from the same kind of documentation You know, you can aim for reusability. You can not just, you know, create a new button every time you need one Additionally, you know speaking back to reusability, you know If you've got if you're creating these patterns and components for all the different pieces of your website Plus the aim of reusability that's gonna lead to faster build times for your team, right? So that's a good advantage So besides the things that I already mentioned, you know, there's some more technical advantages avoid avoiding CSS bloat You know, it's made with actual HTML and CSS unlike those PDFs, you know, you're actually building in the medium That you know, you're providing your documentation for you know, they're one of the same You make it available online easy to find make it easy to edit and then You know, the biggest advantage is you have version control So if you throw that thing up in GitHub, whether it's private or public, you know, you're gonna have You know, you keep track of the revisions and you're not gonna lose anything and you'll always know what the current version is So what's in a style guide? There's all kinds of flavors out there One of the common ones you'll see out there is branding. So, you know, we saw that in the NASA style guide Yeah, they provided logos, but could you download them? No, the website they sent you to didn't exist So here, you know, if you have the style guide, you're not only documenting How to use the logos, how not to use the logos But then you have links to the PDFs or sorry the PNGs and you know illustrator files and vector files They can actually go forward and use them You can do what MailChimp did and they provided a writing guide Writing style guide for their team. So they have a very specific kind of like tone and voice for their brand If you're a customer, you'll kind of see they have a lot of humor and their emails and things like that So they throw that up online for all their writing team to reference So that all their kind of you know voice and tone across all their materials is consistent Additionally, you'll see people like Google put out things like design language So with the material design that's slowly rolling out to your different Android devices You know, they included some specifics about how to design Android app But they created this thing called material design, which is really more of like the philosophy of how you know Why what is what's what is behind material design? What is the design thinking behind it and the philosophy of you know, what were they're trying to do here in this big You know redesign. So that's kind of a big broad kind of ambitious thing You can get more specific. So if you have a really large team of developers You want them all kind of you know using the same amount of you know having all their you know Text editor set up the correct way and they're you know writing, you know PHP and you know SAS syntax and kind of in a standard way so you doesn't have to you know change it So you might put up, you know, you might would do what github did here And they have JavaScript guidelines for developing for github CSS guidelines and they put all that up online up online available for anyone to see This is probably the bulk of what we're going to talk about today So I mentioned it a little bit earlier today about you know, this has a million names component library pattern library UI library front-end style guide. This is kind of Breaking down your piece your website into its basic components in the building blocks Showing the design on the page and providing code samples so that everyone is you know design designers developers project managers business owners They're all kind of on the same page. They're all speaking the same language about these things They're not rewriting the SAS or the HTML like it's all laid out here, you know for the different components So really it's kind of a choose your own adventure for how you want to build your own style guide You could do just one of these things you could do all of them It's really kind of up to you about you know where you want to start Which people in your team you want to talk to? You know who you want to get to get involved? I would advise probably starting with the basics, you know things like your branding assets your logo the color the typography Your grid kind of how pages are laid out and then you know thinking about those building blocks of your site, you know, whether they're carousels or you know Pagers or breadcrumbs or whatever I Like this quote by Susan Robertson. She wrote a really great article on this a part about creating style guides She said it's a you know, your style guide is a one-stop place for the entire team from product owners and producers To designers and developers to reference when discussing site changes in a ratio iteration So again, it's just a common vocabulary for the entire team to use in any kind of discussions Whether you're you know talking about building a new you know whether the business owners are talking about building a new section of site or the designers and developers are getting into kind of a You know in-depth discussion about you know how to build something So This is kind of the meat of the talk talking about a couple of different approaches So I have these three different names out here that I'm gonna be using to the presentation All except the middle one are kind of made up by me as far as I can tell There's not really a standard way to talk about style guides because there's so many different approaches But from my research These are kind of the three different categories that I've kind of grouped them into and these are just kind of the Arbitrary labels I gave to them, but hopefully they make sense So I've got that manual style guide So, you know, whatever your process is to do your design exploration and kind of working through your page layouts and you know Through prototyping things like that, you know do that however you do it Then you want to get that into a style guide, you know, you're starting to formalize it in this manual system You can kind of do a custom build with something like Jekyll or there's a couple of different style guide frameworks out there That'll kind of help you get started with throwing in, you know basic elements like You know h1s h2s paragraphs lit, you know typography stuff things like that Then you would you know kind of using that Style guide as a reference, you know, you jump into the design and build process Kind of you know, they're kind of your blueprints for the site So you're going into your design and build process and then eventually you make it to production So we use this on a site that we just recently launched called world pulse.com I think it was in development for well over a year And we it kind of had a long design Timeline so we created this style guide in Jekyll and it's up there The address there and that'll send you to the github if you want to dig around on the guts of it Yeah, so this is kind of a way for us to like, you know build out the style guide, you know Take it step by step colors typography and then you know as we had more patterns You know starting to throw those in there in the guide as they're available And then our developers could kind of use this as blueprints to then you know build out the site We've also saw this with Code for America so they recently put up their style or you know, I think a year ago They put up their style guide so everyone could check it out. I think it was built by a company called clear left Interesting with them. They didn't actually do the implementation. They were hired just to do the design work So they built this really awesome Pattern library and that was the deliverable So, you know, they did all the research and discovery and all that did the design work And then as a deliverable for you know, whatever team that was going to go and implement it They had this really awesome pattern library to reference So as I mentioned, there's a couple of different tools. So kind of the two different ways, you know of the kind of manual style guys I've seen a Lot if they're going with a kind of static site approach I've seen them using things like Jekyll and middleman And again, as I mentioned, there's a lot of different tools out there They'll kind of help you get started with your you know pattern library UI toolkit and those are linked there I think the probably the biggest drawback with this Approach as opposed to some of the other ones is how to keep it in sync because you kind of have two disparate systems So I'd say number one is just keep the style those, you know the sass and other assets keep that directory Totally like the same as your production environment. So, you know, I've seen people actually just like You know just copy and paste it and overwrite it At the very least, you know, you know If you add something new to the style guide, you know, you're breaking it down and kind of a component-based, you know sass directory, you know with you know partial sass partials for every different component, you know That's a little bit That's pretty easy to maintain because then you can just you know grab that one and then throw it into the production site It was just I'm not a developer But I was discussing with some of our developers for kitchens and they threw out terms like get subtree merging I don't know what that means, but maybe you do Similarly, they mentioned that things like bower which I'm a little bit familiar with And there's actually a tool called style prototype actually built by Sam Richard famous droopler And he has a section in the read me there about how you can use bower, you know, you can Create make your production site have the style guide as a dependency and bower So that you don't have to do any of this manual syncing junk like, you know, it's all handled through code So you can check that out a Little bit later. We'll be talking about an advanced technique where you can actually turn your style guide into a service That your websites and apps can kind of you know, rough, you know, they'll literally use that so there's no duplication They're actually just using that as a tool So when do you use this approach? This is not prescriptive, but here's just some kind of ideas that I have You know, maybe doing design up front is not part of your process or at least not, you know, a long design upfront process Maybe your organization, you know, due to Times constraints or whatever or team constraints, you need to kind of just dive into building the thing Without spending a lot of time, you know, building the design in a separate system Additionally, you know, maybe you don't have development resources that are available at that time And you just have designers that you want to crank away in the design and then that Code for America example I mentioned, you know, maybe design is a deliverable So, you know, you don't need to mess with the production environment because you can just build a tool that you know Let's you build the component library in the best way that you know makes sense for your team Second approach is a generated style guide. So again, kind of, you know, just using whatever Technique that you use to go through, you know, visual design and prototype process Then you would go directly to the design and build So this is kind of a designer and browser type approach The difference here is that with your code that you're developing against Generators leverage actually putting your documentation into the like SAS itself So I'll do, I'll show you an example of that in a little bit But that's the big change there So, you know, directly from your design build you go to production And then you run a generator and by magic boom, it outputs your style guide So it's taking your actual production CSS code and turning it into the style guide You know, you're not really maintaining two systems Something else is magically generating that style guide So you might be asking what is a generator? So let's do an example with one of the most popular tools out there called KSS There was originally a port by John Albin who created a tool Port it to Node and you know, it's called KSS Node But basically here are the steps You would write your SAS like you normally do Add your documentation as comments In the SAS On the command line you're going to run your generator app Whichever one you're using And then boom, it outputs a style guide So let's check it out So this is what the SAS kind of looks like You know, the big difference here is this big block of stuff that you normally don't have up there You might have, you know, buttons and that's it right But none of this other junk So, the big difference here is So in KSS by example You would put your title at the top Then your description So, you know, buttons Or if it's a carousel You would talk about what kind of carousel it is Or whatever kind of component you're using The last one is kind of important Because this is where it gets your style guide structure So just like a book Your style guide is going to have chapters and sub chapters So here's where you kind of define that stuff So here I'm saying it's style guide Chapter one, 1.0 This next section is Getting into Kind of the sub chapter So now we're going to start talking about These specific set of buttons So we have our section title Default buttons You know, we might have another section for Some other kind of buttons later Markup So this is actually the markup that it's going to use To spit out the markup in your style guide So you can see it says button class And then it's got this node You know, token here for modifiers And then it closes the button element Below that You're going to set your classes and states So for example I have a button alternate class I have a button bold class And I want to see what happens when I hover it And then lastly the important thing about I'm making this style guide 1.2 So if I have another section it would be Style guide 1.1 If I had another one it would be 1.2 And then just below that It's just all your regular stuff You just style it like you normally would So once you have your SAS You just Of course you have to install this tool But once you have it installed You just run KSS node What that's going to do is it's going to Parcer style sheets It's going to look for all that syntax That you've written there above your SAS Then it's going to output static HTML files In your style guide directory And of course you can change that And there's all kinds of modifiers To this command line Or this command that you can Really modify a lot of different things But this is the basic example So what that's going to do Is output something like this So by just installing KSS node Adding that syntax that you saw Running it I have a page like this And it's going to You can see that I didn't write markup for each one of these I just used that token to say Use this class, this class And the hover and you know This is all interactive so I can kind of see How it changes on the page And it's going to be able to Contents on the left hand side So this is really cool I have all I've done is Add documentation to my production site And now I've got a style guide So you're probably wondering How does this work with Drupal I won't explain it because John Albin Has already done a fantastic job Of explaining it at Drupal.com Amsterdam, I've got the link there I'll be sharing my slides afterwards So you can get all the good links To the Drupal environment So I mentioned KSS node Is one example, there's lots of generators There's a whole website Dedicated to them Again there's another list of part article That goes through these And kind of goes through the pros and cons And kind of splits them out by Whether you like to work with PHP Or Ruby or node It's got generators of every different flavor And usually forks of each one too So you might ask When do you want to use this approach Maybe your project Doesn't afford a lot of time for upfront design Maybe you want to design Against a production environment So maybe you'd like to just jump directly into Drupal And start kind of prototyping and designing in Drupal Then you could have A style guide directly from a Drupal environment Maybe you're only doing the implementation So maybe you weren't given a style guide You're given some other kind of Or maybe you weren't given a nice interactive Online style guide Or kind of looser style guide You could take that Port that documentation against your sass And then you could solve the style guide at the end And then maybe, I think the most popular one is You don't want to maintain a separate custom System for your other style guide And then another advantage is This just keeps it in sync and you don't ever have to worry about it Because it's coming directly from the production code Lastly For lack of a better name, I'm calling this a hybrid approach So assume you've already made it A development production stage You're going to take that Actual CSS And javascript and other assets that it's Included in that site Create some kind of Custom system Whether it's Jekyll or whatever To list out The markup for your different components And things like that And then that will get you a style guide So this one is you're kind of taking your production code Creating another system that has Those elements And then you're just applying your production code Against it. So that kind of allows you to be A little bit more modular In their approach And ultimately I think it's a little bit more flexible So Happy Cog has a good article They wrote about how they kind of used that approach Similar to this for building a style guide For the Ben & Jerry's Style guide Which was for their new site that they built Some of the things That you Reasons why you might take this approach You might not want The documentation to live inside the SAS You might want it kind of If you need more people to work on the documentation If it's all locked into SAS files That doesn't allow a lot of flexibility If you have your writing guidelines Or branding guidelines Then you're kind of maintaining Two different systems It works great for SAS But it's not really great for those other examples Maybe you need some more flexibility Or maybe you need flexibility about how your Designers and developers work together So the Happy Cog article they kind of talked about how One person was able to just jump in And start designing and building the site And then another designer was able to kind of leverage That code to then kind of Throw it into a juckle site To then provide documentation and build a style guide As the site's kind of being built So that's kind of cool And then if you want to take your style guide to the next level There are these people So Salesforce has a really awesome UX team And they wrote this great Article on Medium called How to Create a Living Design System They You can access their style guide online It's really great They built this really cool tool called Theo It's up on GitHub Without going into too many details It can take JSON input And then output SAS, less Stylus For Android and iOS apps So they built, it's like one repository For all their design properties That they can then port out to all their different Web properties and apps So it's really advanced stuff Also Lonely Planet is doing really cool stuff Where they basically created this guy Ian Feather Who's style guide genius Wrote a great article called the Maintainable Style Guide And Their Style guide is really cool And they built a thing called the Component API As it sounds turns their style guide into an API That then their application Can reference, so Check out those links Another common Question I get asked is What if I already have a site and I want a style guide For it, right? So I think there's kind of two approaches And they kind of leveraged the ones I talked about I think using kind of a hybrid approach Is easier because you've already got your production You know Your production SAS If you just build a quick like Jekyll site That has, you know, maybe not All of your components, but you start with the basics Typography Colors, you know, to get those things in there Maybe a couple of other, you know, your common components You know, you just throw that markup in there That matches what you have in the production site As long as it's reusable, or at least At this point you're setting up The markup that is going to become reusable And then, you know You're applying your production SAS Directly against the style guide And, of course, you know, as, you know You could start out very basic, just collage with photography And then as you want to build out more patterns You can do so. So this is kind of the easier approach I'd say a harder approach is going, is using a generator Because this involves you going through Every piece of your SAS If it's all broken out into components And part, you know, partials components That might be easy But if it's not, your SAS isn't really structured already That might be more difficult But even if it is, you got to go through each one Right in, you know, the chapter got, you know Headings, descriptions Putting in, you know, chapters And sub-chapter numbers, all that stuff So it's more Time-consuming, but in the long run It's more sustainable. So, you know You've done all that leg work Then you're in a good place to, you know Assuming you want to go the generator approach It's going to be more sustainable in the long run With the leg work up front So I'm going to transition to talking about Breast practices here Put it online and easy to find A little URL to go to If you're comfortable doing so I encourage you to make it public Just because people hate having to go through Users, you know, logins And passwords and stuff like that Again, you know Your website isn't a lot of secrets You know, you can just view source A lot of time. So, you know Who cares if people can see, you know The code they're using to build your website A lot of times that stuff doesn't really Proprietary stuff, so No matter who they are Having them be able to just go through a URL To find this documentation is going to be a big one for you Make it for everyone So, it doesn't just have to be for designer It's a great tool for designers and developers To talk to each other But can you imagine, like You know, account manager, a project manager Talking to, you know, the product owner For your website and being able to use this style You know, maybe the product owner can use Your style guide is actually like a way to talk about Like, oh well I like the way this page is laid out But I want to change it, you know Or I like this component, what if we move this component over here It's like they have the building blocks now They've got the language, you know, to talk about it So, you know, there's a business case for it It can make, you know, just the management Of projects easier, and then of course, you know Designers and developers It really streams lines, you know, how they collaborate With each other Really important, make it part of your workflow If you decide to dive into the creating These style guides You really have to go all in for it, you know It's not something you want to like Kind of try out, build a little bit Because immediately you're going to find It's not getting the attention it needs It's going to get out of date, and then once it gets too far Out of date, then you're never going to go back And update it, so Really kind of making it part of your workflow I think, you know, it's going to lead to those advantages Of, you know, reusing code Making, you know, the assets of your site You know, a lot more streamlined And, you know, ultimately making your build times faster When you're building your components In general, you're really trying to aim for Reusability here, so, you know, if you're creating You know, a carousel, don't call it Homepage carousel, because that thing can be used On other pages, right? So, you know, keep the naming conventions Kind of general, and, you know, start broad And then move down to, you know, More specific things Kind of Going, adding on to the other thing You know, make maintenance easy, so You really want to keep this thing Up to date, so if it's too hard To, like, add a new component Or add documentation, or you can't Quite get the generator to, like, throw things Into the style guide, like, that's no good Because then, you know, if it's hard to use No one's going to use it, it's going to fall out of date And, you know, that's going to prevent it From becoming part of your workflow All right, lastly I've got Some resources here This is a website that's probably started last fall And I think it's really amazing, because I had been researching, kind of, style guides For the past year, pouring over articles And books, and tools, and kind of, like, Keeping my own running list of things And then Brad Frost and Anna Debehan Kind of put this website together And bam Now you have all these great, great resources For these style guides All in one place I think another thing that's really exciting About style guides is right now is, you know It's created, there's one in the 2012 But since then we've kind of seen a couple Of ones sprinkling in And now we have all kinds of examples So there's a page right here that's got examples That just shows you all kinds of different, like, Really, you know, big name companies That are putting their style guides out there They're writing articles about them They are putting the code up on GitHub So you can check it out So it's a really, really amazing resource And the best part of it Is that it's open source I encourage you to, you know If you are, this is something you're interested in If you write an article about it You're free to throw it up into the website If you have an example You know, we'd love to have it up there I've been a real big fan of this repo And I've been trying to contribute as much as possible To it, and it's just a really great resource That now all these kind of disparate ideas Are kind of now in one place And there are a couple Of Usability Improvements I think can be made So You know, if you're interested in that If you browse the site and you see things That make it hard to use or inaccessible Like, I'm personally really interested In kind of, you know, making this tool Really, really great in this really great place On the web Additionally, Brad Frost You've probably heard of He created a tool called pattern library He kind of coined the phrase atomic design So this idea of like kind of component based design And break down a site into the smallest pieces He's now writing a book And it's in process So he is kind of Just putting it up online, it's in process You know, he's just writing it kind of a chapter at a time I think it's actually all in GitHub also If you care about Seeing how you create a book in GitHub So you can check that out Additionally They've created a podcast And so I've listened to a couple of the episodes I've listened to the first two Against It's Brad and Anna They interviewed Gina Bolton She worked on the Salesforce style guide So really what this is doing Is they're interviewing these people At these like really major companies They are talking about their process They're talking about the pros and cons How they got their, you know, bosses To buy into this And it's really interesting to hear them think You know, specifically how it works Into their workflow And I listened to the second one Also, it's Federico Hogato He is at Mailchimp So you've probably seen their pattern library also And he talks through similar things Additionally, the thing I talked about I basically have been using GitHub As my own Evernote for researching A lot of these things So I just have a repo called UX And I have a markdown file called So a lot of these links are now On styleguides.io But if you want to check this out Also, I'd be glad to see it I think that is it Hit a button there So you have to check that out And thank you So I'm sure we have some questions So let's get started Okay We got a way of organizing Things But most of the times New team members Add it to the team Or sometimes designers just start Building their own CSS Files, right? But I think that maybe We should include In that documentation In that styleguide The folder structure And what kind of styles Should be included in each of those files I would like to Get your opinion about this Yeah, so I think you brought up Two really good points there One is I think the main reason you're starting to see People like MailChimp and Salesforce Because they're big companies MailChimp is like 300 people They have designers leaving They have designers coming on What a great resource To have their styleguide up there You want to train people of course But if you can point them to documentation About best practices Coding standards How all the designs are built What a great resource An onboarding tool for new people It can get them started a lot faster And the second point Give your guide a guide I think a lot of these You jump into them and then boom It's immediately You see patterns and you see code Jump into code There's no explanation about when these things are used Or why or how you got here To guide them Like you were saying If you have a specific structure For your themes or code standards Guide people through it Because if it's a good guide It's going to appeal to a wider audience Than just your developers So you need to make it A good table of contents Give things descriptions I think to your point Including some of the softer stuff Where it's not Here's It's not just a pattern with code It's like here's kind of our approach To building websites Or building themes What size t-shirt do you wear? Do you want a t-shirt? Anybody who asks a question Can go pick a t-shirt over there If it's your size Now everyone wants to ask a question I just want to make a little invitation There will be a buff right now And I kind of Have the module which implements KSS node with Drupal And I want to show it And get some inspiration Great, check out that buff Have you worked with the Drupal style guide module at all? Or tools like that There's a couple of modules now that do Essentially the same thing In terms of building style guide directly in Drupal Do you have any experience with those? Yeah, we do have an experience with that So I haven't used it personally In a little while It's a module you enable And it comes out with some default output Of basic web elements So typography Images, things like that But then also some Drupal specific stuff So like pages Or messages, things like that I think the thing we found Is it's a good tool To aid developers But it's not Something you would ever show a client So it's a way to gut check your own work Building your site, create all your styles And then here's a page that spits out Every kind of web HTML element you can think of And here's kind of how you can like Queue it to see if things look okay I think we found out it wasn't super flexible And it allowed you to kind of Add things to it but It wasn't structured at all I think those are kind of things we didn't like It was just kind of spit everything out on one page But I think that is a good example Of maybe the hybrid approach On SAS against Custom HTML elements How to improve it I think I would look to See how some of these Jekyll style guides are Structured how they How they actually Structure their files It's kind of similar to SAS Partials They're breaking down each component Into a But it's keeping everything very Separated And like individualized So it's like easy to find within the code itself Additionally that allows you To give you structure in your actual Style guide yourself So instead of just getting pages Spits out all the elements on the page You would be able to create chapters And subchapters So I think that would go a long way And kind of improving that module Well the recording Oh the recording, okay So what would be the one thing That you would do to incorporate The style guide into the workflow Like if you had to do one thing What would that be And who would you give it to I think the biggest thing is You know the style guide is not Like written in stone It's not like here's the style guide Here's the thing that everyone Must follow to build anything You want to build a new section on the site You want to use new components too bad You have to use the existing ones What this thing is for It's meant to be flexible It's meant to be updated But your approach I think should be for your workflow Is you know reference the guide first See if you can use those default components As they are And if you can make a You know if the designers can make a case That something needs to be modified Or you know you need to make Like an alternate version of it Great add to the style guide You're building on to you know The base thing and you're creating Modified versions Or if you revisit that original component And you're like Ah we really wrote that in a dumb way You know change it right So it's not supposed to be written in stone It's like it's a conversation starter It's like if we can reuse it Great then we don't have to write any more CSS If it doesn't quite fit our needs Let's have a conversation about it And you know maybe modify it Or build on it When looking at the SAS And all the commenting that goes on People love to comment their code How do you convince people to do that then Or who does it I would say yeah you know Organizations are all different A lot of designers are digging into code now So I can imagine a world where You know the designers are actually doing this You know if they're writing the SAS They could be writing those comments also It's just that You know if you're doing a pull request And someone's reviewing that pull request Then you kind of make it part of your culture That you know if you're using this If this is a tool that You know you've all kind of bought into Then you know you just kind of have to police yourselves Into knowing that this is a good thing to have It's going to help onboarding It's going to help you build things faster And just make it part of your Maybe your code review process That like okay you wrote this in your SAS Did you write documentation Did you write it the right way Did you check the style guide to see Is the style guided in a readable way Hey So one of the biggest problems we've had With implementing a separate style guide That we import into our Production site Is keeping the markup consistent The SAS no problem Have you figured out a good way of doing that Or do you know of any good ways Of keeping the markup consistent as well As the styling No I think that's a big problem But Markup especially If you're just writing a static HTML site maybe that's easy But if you're using Drupal Or some other CMS How do you make sure that's going to be consistent In KSS One thing that's nice about that generator Is that it's actually asking you You don't think you have to But if you want to get the most out of it You want to write that markup That button example You're writing the button out HTML In the documentation itself And that's what it's using the style against So I think KSS shows That markup at the bottom That example I showed Showed all the buttons at the bottom It was like Button elements, class, and modifiers But that's a really simple example If you've got something like Meaning a bunch of teasers You can imagine that gets pretty complicated So Yeah, just caught Okay, he was saying Just write the HTML And put it into the documentation Whether you're prototyping it or whatever Okay, so he's saying Take your If you're happy with the output that Drupal is putting out Throw that into your SAS documentation for your generator Or if you have a specific way You want the markup A lot of times if you're going with one of the other methods Where the designer is saying Okay, here's how I want a teaser to look And they're writing the markup about Where they want, and maybe they know something about Drupal So they can throw in things like Views and classes and things like that And then they're kind of Setting what the markup would like And then the designer and developer Can have a conversation about whether that's possible Any other questions in the back First of all, thank you for the talk It's been Enlightening A little bit We have been working with Style Guides But the old PSD Photoshop kind of thing And now we're migrating to Living Style Guides And I stumbled, I think it was your work For Kitchens It was a Style Guide That says it's alumni Or something like that, I believe At one point I saw Like branding color And like a month later I saw A whole different thing Or two months later And I find it really fascinating That you, I think I don't really know which tool you use But it would be great if you could Talk us through that a little bit But I think what I saw is that you build Small components and then somehow You build the page, you see Classes from panels, I think it was And like the layout Of the page was like Exactly How we look at the end If you could talk us About that Okay, he was asking about A Style Guide that we built for Texas X's It's an alumni organization For the University of Texas in Austin I believe for that project we used a tool Called Style Prototypes, which I mentioned earlier So previously we had been kind of Using our own kind of Home built Custom built Jekyll thing You know, I'll put our Style Guide That was our first time we used Style Prototypes If you've ever looked At Pattern Lab, they're very similar So kind of Pattern Lab And Style Prototypes kind of use as Atomic, actually Pattern Lab, or sorry Style Prototypes can optionally Use Atomic Design in this Texas X's Example, that's what we did use I'll make sure to like throw that example That's a good example of ours That I forgot to throw in here So it's using the Atomic Design So you know Atoms, elements I forget, molecules, all that So instead of kind of breaking it down By chapters, that's how it kind of breaks it down So you're starting with the very smallest components Like a header And then you might put that into A larger component, which is like A teaser, so now you've got a header And You know, like an image And a teaser text And then you can actually start to throw that Into maybe a view Where it's putting all those teasers and things And then now you can throw those things into layouts So it allows you to start with these Atoms Throw them into larger components And then actually throw them into page layouts Without rewriting in that code Because you're just throwing in Tokens That you've already built To build out these layouts And it's a really great prototyping tool Because it's all responsive And you can turn into it like Changing your viewports and things like that Dynamically without having to click and drag your screen So I will say that we found Style prototypes a little bit challenging To work with But we did like That it provided a lot of structure And kind of had those prototyping And layout tools out of the box Where our other tool did not Alright, I think that's it. Thanks everybody