 for building the sound. So you're in the, I think, the only recursively titled talk for this week. It also happens to be a design talk. So we're into idiosyncrasies here. My name's Mason Wendell. I'm the jazz mess, apparently, today. I am a senior developer at phase two, just started recently and I'm very excited about that. Hey, here you go. Better here? OK, I'll stay right here. I'm not dance too much. I'm coding designer on the internet and everywhere that I am. I've got a website and I am an organizer of a couple of meetups in Philadelphia where I live, the SAS meetup and the RWD meetup. And they're cool. So this presentation is online. It's at codingdesigner.github.io slash box. Please feel free to check it out now or later. And I expect there will be bugs. I'm using, I got very excited about this. I'm using a lot of techniques that aren't in the public Chrome. So cool things that may break in regular Chrome. So I'm going to iron those out pretty soon and make this a little bit more robust publicly. So a little bit about me to set up our context here. I'm a music nerd. I went to Berkeley College of Music, which is a school that only taught music, as you might expect. While I was there, I learned really deep music theory, jazz and classical composition, and just insanely, intensely studied how to play the bass. And then, as that's a professional trade school, I use that specialized knowledge to play avant-garde noise and weird punk rock and indie pop, getting more and more commercial, I think, as I went, oddly. So yeah, I agree, total waste of money. But there are a couple of things that I wanted to mention, the reason I bring that up, that came out of my music education. And one, as I wound up finding my passion, not as a professional musician, but as in web design. And in getting there, I discovered that little bits and pieces of this music education were really relevant to my work as a designer. Actually, it took me years to really put my finger on why I felt that way, it's kind of a feeling. But the second thing is that the jazz musicians who came up in the 40s and the 60s, they're cool. And not just Fonzie Cool, but these dudes had to work at it. It's not just bang the thing and they just studied. They are geniuses, but they studied really hard. And they made an art and a feeling that flawlessly hid the intense amount of work and craft that goes into making it. I think that feels familiar to a lot of designers and a lot of web professionals. At least I know I've met a lot that share music background. So I've been designing since like 95, but I've been designing in the browser since 2009. And I'm not opposed to Photoshop. It's a good tool for what it does. I'm not going to rant against Photoshop, I promise. But I make web things. So I use CSS. It's my primary creative tool. It works out great because as I make web things, CSS is native to the medium that I work in. Because I'm doing this work in the browser, it makes sense to also present in the browser. And this is really helpful because it gives clients all the context they need in order to make the crucial decisions about the work that they're hiring somebody to actually create for them. Compare that to a piece of paper printout of design, which I unfortunately have seen used as a decision-making tool way too many times to count. And I think that there's a pretty inescapable argument for keeping things on the screen where they're meant to be. So I purposely left it a little vague in the last slide what we're designing. And I didn't say web pages because designing web pages is a lot like designing a page. It's a set of boundaries. And we don't have those boundaries on the web because we're designing systems. We're working with a content management system. And that same level of thinking has to go all the way back to the design level. Anything that we create has to carry the weight of new content. So when we hand off a project, when we walk away from a client relationship, they've still got their project. They've still got their site and their design language. We do our job better if they can add new things to it. And we do that by really considering the small and the large scale of our work. Like really little things like what font or the characteristics of the serifs on that font. All the way up to the layouts in every different conceivable responsive width. So thinking in that large and small level of detail makes me think of style guides. I'm not the only one. And it's worth thinking about what style guides are and why we actually have them and why we might want to think about using them in a different way. So a traditional product of creating the design system is for the designer to create a style guide. This might be done after a design is complete as a way to communicate that design thinking to other stakeholders or future designers. In our design language, like I said, it needs to sustain a feeling and a character across many different sections of content. And if the brand is cool and sophisticated, it probably won't do to lose sight of that and start adding tattoo flames. So that's why we need style guides. They codify a design so it can be communicated. And so a lot of brands have started to publish their style guides. And a couple that I have here, I think that I've got a list apart, which most of us are familiar with as web professionals. And as you would expect, it's nice and clean and airy and suits the brand. And you can tell that by looking at the style guide. Another one that was published by some of the same developers I believe is Code for America. And they have a very distinct branding as well. And without looking at the pages of their website, you can get a good sense of what the character of that design language is going to be just by looking at a few sections of their style guide. So I'm suggesting that we flip the process around and start with a style guide and treat it like a design tool. Brad Frost has written about this and spoken about it a lot lately. And you may have seen him write about the concept of atomic design. In that concept, he proposes starting with the smallest things. And he calls them atoms. And you work your way up through bigger and bigger constructs until you design full pages and templates. And actually, he's developed something with other people, a project called Pattern Lab, which is a style guide creation tool. And I've been using that on recent things. And I'm going to be using that in some of my examples here. So by starting with the style guide and creating the reference for the design language, as we create the design language, we get a very valuable perspective that allows us to fine-tune the minute details and see how the little pieces combine to create the whole. So maybe a more of a direct way to look at this is to see that each page, whether you call it each item on a page, whether you call it an atom, like a molecule or a menu, an image gallery, an author, a byliner, whatever, you'd call that a component. And a design component, I think of as a self-contained chunk of design, and it's an extension of well-formed content. Components can be assembled into other components and combined into layouts. So instead of designing a page, the goal is to design an interlocking family of components that become our design language. So when we start with an empty style guide, or an empty page, or excuse me, when we start with an empty style guide, instead of an empty page, we actually have a lot less emptiness. We get a scaffolding where we can create our design language and codify those little things. And we can organize those into bigger things. And we start to see our content structure take shape. And we get to work with that from a design perspective. Until finally, by going back and forth through design iterations, through the little details, out to the big things, we come up with something that actually has a certain specific character and conveys that feeling and meaning that we need. So that's really similar to how I think of when it comes to jazz composition. So this is just about music for a second. So a composer, and we're looking at Herbie here, Herbie Hancock, he's going to create a tune. He's going to be inspired. He's going to have a reason to create a melody. And that melody is going to exist in a certain tonality. And then you've got the melody and the tonality. And he's going to experiment with different chord progressions, things that work with that melody, things that enhance and things that add surprise. And he's going to have these chunks, these phrases, that have a feeling. And then finally, we're going to assemble that into a form. And that's why that starts to feel like design to me. This is a very constructive process. But we're still just making the document. This is just the style guide for a song. So it brings that to the band. The band's going to play, going to get together, count it off. They're going to play that through one time. And they're going to keep going. If you're a jazz fan or not, I'm going to speak to those who aren't jazz fans. And maybe your impression is that jazz takes a long time. So what's happening is they play through that song, that melody one time. And then they go round and around the form, mining it for creative details. They're going to pick out nuances from the melody and from the harmony. And they're going to create and combine and interlock those. They're going to be reassembling the design language in real time in the form of jazz song. So this is musical thinking. This is style guide. This is all getting nice and mixed up together. And that's why all of this musical training sort of resonated for me in design. Because it turns out that all that creative finding and crafting of melodies and lyrics, constructing that harmony and creating that feeling, it's a lot like designing. So let's go a little deeper down the rabbit hole and draw some really more distinct connections. So at our core, we have our melody or our lyrics and melody. That's our content. That's what you can't exist without. So this is why we might argue for content first design. Good music is not good because it's in 4458 or resolves to a D low grant with a sharp nine. It's pretty cool though. It's about the core melody lyrics and the content. So that's what we need to start with. We need to know what our content is going to be before we decorate it. We're probably never going to have every word or image in advance, but we can do a pretty thorough content inventory and modeling and be able to map out the characteristics of our content. And that's what we need to know before we add it to our CMS. And it's the same for our design. So by starting with the content, we have the opportunity to actually follow the content's lead that I got behind. It's really the first piece we needed to build our design vocabulary. So now we've got our content. We start to layer things on. We've got a harmony and rhythm, which are our components, the things that we can move around, things that we can shape, the things that we can assemble. Because they give our content, they give our design, they give our music structure and distinction. So we've done a content inventory, content modeling. We don't just string that out and hope for the best. In musical terms, you can't have variations without a theme. So our melodies need structure. They need context. And so do our designs. So we take it. We take that content. And we mold it into various components that enhance the tone and the message of the content. We decide whether something's going to be verbose or bithy and image heavy. We look at it. We consider it. We ponder it. We use. We look for patterns. We try to pick out the different pieces that fit. We try to throw away the ones that don't. And we combine the ones that we like. And we make components. And we combine those into bigger components. And we assemble those into page templates. I did get behind. And we don't yet even have decoration. We're not even at the point where we're worrying about the color. We don't even worry. We're not at that point yet. This is structure. But this is still design. So now we're going to add a little bit. We're going to get into that territory. So we've got our instruments and our players, which is analogous in my analogy, to art direction. Because they add an aesthetic framework to the limit. And they add limitations. So that's the limitations. It's a small band, or big band, or whatever. They're all going to be able to play the song, but they would do it differently. And that's why we need a direction for the music or for the art. So we start adding basic graphic elements to our design. This is going to vary somewhat from designer to designer. But I've always found that if you start with typefaces and type sizes and colors, they go a long way towards defining a design language and finding the right combination of these elements is really going to carry through to the rest of the whole project. So everything you create from this point on is going to use that type, those sizes, those colors. So it's worth it to spend the time to get it right. There are a couple of tools I'm going to mention as we go. But as we're choosing type, the one that I tend to go to is TiteCast. This is an online service that lets you combine web fonts from most of the service providers and use them in their interface to see how they work together and find combinations. So this is them being able to choose some of the fonts. And this is being able to do some of the styling. They've got full control of the CSS. Unfortunately, I don't believe they have SAS yet. But I usually work here and then bring things out of that system. So what I would get to a point where I'm looking at the combination of typefaces that I want to use on a project, seeing how well they actually work when they're against each other, if there's harmony, if there's vibration, if it is going to end up serving the needs of the project. So then we move on to choosing the right sizes and the type scale for the project. So I like to set font sizes that work harmoniously. And a few years ago, a designer by the name of Tim Brown brought forth the concept of modular scale that really resonated with me. And also my friend Scott Kellam. And we got together and wrote something called SASy Modular Scale that lets you do these sorts of calculations within SAS. So the concept of modular scale is you use ratios to establish the relationships of font sizes, or really lots of other elements, in your design language. So it's actually been a concept that's been around for hundreds of years, I think. When you are in Word, for example, and you pull down the font sizes, there's a reason you don't see every distinct number. And it's like 12, 18, and 64, and 72, or whatever. That's taken from the history of font scales. And this is the same deal. But we get a little bit more fine control over how we want to define that scale. So in the SAS version, we can choose different ratios, different starting values. And so what we're seeing here is a scale that has a fairly wide but even set of sizes between our smallest and our largest that we're showing. And here we have one that helped me out. Did that advance or not? I couldn't tell. We'll see. There we go. And here we have one that's got a more narrow range of sizes. And that's using a different ratio to calculate that. And you can get a little bit more fancy and say, this is one that uses actually an interlocking golden ratio. Then we have two that are large, and then two that are smaller, and then two that are smaller. And they kind of work in pairs that way. And they have an effect on the character of the design that you're going to work with. I think it's one of those really great things to start early with. And then color. Another SAS tool that we can thank Scott Kellen for is Color Schemer. Color Schemer lets you generate harmonious color families based on a single seed color. So similar to tools like Cooler and Color Scheme Designer that help you choose analogous and complementary colors from the color wheel. We got it. Yeah, there we go. Cool. This gives us a lot of control to experiment. So for example, we've got our primary color on blue. And around the color wheel, on the other side, is its complementary color. Just some ninth grade color theory, I think. It was their orange for the blue. So we might want to choose a color scheme that uses that complementary color, and then branches out around the color wheel in one direction and the other to find colors that are close to its complement. So you end up with a blue that's going to pop, and then a family of colors around that to give that some context. So you can use Color Schemer to say, I want to experiment with that and see what this pattern is going to do. And another pattern, and another pattern. And so you find a color scheme that works for you. And then, of course, you can tweak it and make it your own and move things by individual minute degrees until you get the exact color scheme that you want. But it's a really great tool for being able to experiment with different options at the very beginning of a project. So like I said, we just have the document so far. This is our basic stuff. It's time to play it. So when we're doing component-driven design, we can shift our focus between the fine details of each component, and then step back to consider how they lock together into a page layout and step further back to see how they relate in various responsive layouts, and then further back to see how those layouts work within the context of the entire project. And going in and out back and forth in design iterations. And you can do that forever. And you come out with the thing that you want. So because we're doing design iterations, what's great about doing it that way I found is that it's helpful when I work solo and when I work with a team. So when you split out the pieces of a design language, I'm going to work here. You're going to work there. Between different designers, they can work simultaneously and still be aware of how the design is changing in shape and form as each go and contribute new ideas and collaborate. So you get a nice amount of collaboration by doing it this way. But you can also bring in designers that aren't bought into the whole coding as design thing. You can bring in Photoshop-based designers by asking them to work with the design language that's being created to contribute to it by submitting their Photoshop designs and then having somebody who's better versed in the coding to bang that out into markup and CSS as quickly as possible so that you never get stuck in a raster-based Photoshop iteration that takes you away from being able to have this nice family of HTML and CSS that are going to create your design language. So I mentioned before that I've been using Pattern Lab. So here are a couple of screens of a recent project that I've got where I'm doing this process. Here's the color scheme and some of the fonts that are being used. I used Color Schemer. I tweaked it. I used the typographic tools and actually really happy that I got to use some of the H&FJ fonts for this project. You take those basic elements and then you start to style things like the basic text components. So we have a headline, a sub-headline, and a block quote. You start to combine those. We've got a heading and sub-heading pairing. The designer, the design process made me see, oh, well, that arrow that pointed down. I added that because I wasn't sure about it. I liked it. Turns out it becomes a speech bubble. And I looked for other interesting ways to add speech bubbles. This is for a communications project. And so you might be able to notice that in the white space surrounding the header with the canary promotion, on the far right bottom of that, there's another little notch that becomes another speech bubble. So I looked for, do you want to take that? No, no, no. So I looked for different ways to extend that design language in subtle ways as I interlocked all the pieces. You also, because you're working in the browser, you get a chance to experiment and find responsive opportunities and solutions early on. So this is the header for the project. And even before it's integrated into a template, before it's even got a page, I can look at it in this context all by itself and say, you know what, when it's wide, that background with the feather looks great, but as I get it narrow, it doesn't work anymore. And I wanted to find a new solution. So the heading is responsive in and of itself. It has its own states for different widths and for different heights even too. And then you can assemble all of those pieces into page templates. I'm a big fan of philmurray.com, by the way. Filler images with Bill Murray. And the interface that I work with lets you see those at wide and narrow and mid-range and the whole range of sizes so that you can expand the viewport out, see when it breaks, and then make changes to your layout and your design as you see fit. It's a really great designers tool that integrates run and development techniques. Couple more techniques, couple more tools before I wrap up. And for building grids, yep, is singularity. So singularity, it's been talked about at Drupalcon. It's been talked about in a lot of places. So my friends Scott Kellum and Sam Richard made this. And it's my favorite grid system. So you use SAS variables in mixed ends, and you can define any grid you want. You're no longer limited to the tyranny of the equal column. And it could be asymmetrical or symmetrical. I need to go back. So there we go. So we're looking at a symmetrical grid that I think is, I don't know what, nine columns wide. And you define that by having a variable in your SAS that says I want to make a grid, nine columns. And then you have another variable for the gutter space that you want to add. And then you apply that to each item in your grid with a mixed end. And you'll see that as include grid span. And I'm only showing the first two. And so it would include grid span, and then one column wide at the first column, and then one column wide at the second column. It's really as simple as that. But you're not limited to equal dimensional columns. So here's one that has some interesting groupings. It still boils down to groupings of equal columns. But it's one column wide, and then two columns wide, and then one, and then two, and then one, and then two. You can still do this with most grid systems. But this makes it really, really easy. And then finally, there's something you just really can't do with most grid systems. And this is a fully asymmetrical grid that I think is like eight, and then one, and then five, and then three, or three, and then five. And I chose the first set of Fibonacci numbers because that's not symmetrical anymore, but it does make it more interesting if that's what you need. So if you want something that kind of stands out and says this is a bit edgier, this is a bit less even, you can actually go to your grid to give you some of that without having to go straight for the big guns of say a grunge texture. Another tool, and one that I also worked on with Sam Richard, is Breakpoint. We talked about this last year at TripleCon. But it's a tool for simplifying and organizing your media queries. You can assign a media query to a variable name. It's got a really short, easy syntax. And this lets you give a context to a media query that otherwise would just have been a value placed somewhere in your style sheet to be forgotten. So you're organizing bit by variables. You get the shorthand syntax. And this lets it be a little bit easier to experiment and play around with. A lot like the color schema tool. It's all variables that can be changed. If you don't like it, you can move it by degrees until you get exactly what you want. And the way it works is you have a variable, this is just basic, and it's 543. And that's gonna compile into, on the right, a min with a media query at the value of 543. There are more, the next one that I'll mention is that you can have pairings that will compile into a min and max with media query. It goes all the way down. You can make any kind of ridiculous media query that you like. It handles things really gracefully. But this is some of the basics. And it does allow you to do some really nice experimenting and then move that on to production ready code. There's a lot more bullet proof. And then I also wanted to mention, that's for you, buddy. I also wanted to mention EQJS because it solves a problem that we don't have the solution for in CSS. So an element query is really a theory of an element query. It's gonna be the ability for a piece of content to react based on the dimensions of the piece of content it's encapsulated within. So you've got a container element that might change in size. So say you have a column width and inside it is a media gallery. Now, there's no way in CSS to say, when that column width is wide, I want my media gallery images to be bigger and then style our text differently. But with EQJS, it's possible. So you add a data attribute to the element. EQJS goes through and parses that and then writes a state to that element that you can then style against. And that works a little bit like this. So we'll see on the top at the far right, data-eq-pts points. That is the settings for a small and medium and a wide element query. And then the JavaScript will go through and find where your element is. If it's within one of those ranges, it's going to add a, I got cut off. It's gonna add an attribute that you can style against. What is it, Sam? What's that? It would be called? Datastate. Datastate. Datate-eq-state. And so you can style against that and be able to actually react to the context of an element's container. It may sound heady, but it's super, super useful. So finally, with all of this, there is the trick of working within your development environment. And that's because, in these examples, pattern lab is its own thing. It's not part of Drupal. And what I like to do is do all of my styling within my development environment, within my Drupal theme, and then have pattern lab react to that. So I made a really simple, and trust me, I barely know what grunt's capable of, but a really simple grunt configuration that compiles my CSS from my SAS and then can move that into my pattern lab instance. It can also collect my images and my JavaScript and fonts if I need to add those as well, as well as do things like JS-hunting. But that is core, what I needed for is moving things from A to B. And it's pretty simple to do it. There's a download link on this slide. So if you go to the slides on GitHub, this download link is there. And you can experiment and use it for your own purposes. And it's also linked right here. So these are all the links from the different pieces of this. Please reach out to me. I think we have some time for questions. I think there's a microphone somewhere. So thank you very much. Oh, there's the microphone. It's in the middle of the room. If anybody has any questions. Hey, thanks a lot for the talk. I had a question when you were talking earlier about having your content before design, which I get. I was thinking though, in terms of this idea of making a style guide or your design patterns, to what degree of content do you require before you can delve into that kind of thing? Cause I would think you could start doing that beforehand. It depends on, you have to have a knowledge of what you're designing for. Sure. So if you are intimately aware of it, say if you work in house somewhere, you might have a jumpstart on something that maybe it was a client project. But you should have a good understanding of what that content is. I really like being able to go and doing some degree of a content inventory with stakeholders. So that I have the tools I need in order to be able to have informed design, not just I wanna express something, but also to get the clients and the stakeholders on board with a process that I'm not here to express myself. I'm here to really get to understand your business and your needs and understand at a very deep level what we're trying to design against and what we're trying to support. So if you don't jump that gun, you can get them involved in a process that has a much better, much more solid foundation. Yeah, so you gather, I mean you're understanding what the client and what the project is about, but then later in the project, when you have actual content on a section by section basis, then you go back and show some designs on that. Yeah, you might've seen that even in the design examples, the text might've been lower Mipsum, but that's not the point. The point is that it was well-defined, that we knew we needed a headline, we knew we needed sub-headlines, and on a deeper level things that you didn't see, you knew that we needed to have structure like clients that had theater events and those sorts of things. So we need to have that level of definition to our content, even if we don't know what the language is gonna be. Hi, with the element queries, do you prefer to set the config within the document itself or do you like to do that within the CSS file? There's kind of different libraries that do some more things. The library that I'm using does it in the document. I'm not familiar with the other ones necessarily, so I don't have a preference as long as it works. My real preference would be for it to be part of CSS, but there are a lot of reasons why that's hard and maybe not possible with what we have. And what tools do you use to actually implement and reuse some of these standard components like DisplaySuite or teasers or how do you reuse these components? Honestly, I've got a lot of components that are in old projects, but I like to mostly leave them there and start from scratch with new things. Sorry, I mean like within the same site. Oh, within the same site. Oh, sorry, exactly. That's what the pattern lab the style guide is for. So using pattern lab as an example, you've got a directory of templates that will be for little things like, I just wanna see all the headings laid out or for bigger things like let's assemble those into this component and that component. And so that's all stored in pattern lab and then you can say in Drupal, you have a template that's gonna match to that. And so if you are on top of that, you can have there be parity between your Drupal templates and your pattern lab all the way through to launching completion. I'd like to know at what point when you're working with a client, do you get like what's the process for sign off and dealing with the comps? Is it like the Photoshop comps or do you work with the HTML page or how do you get like initial confirmation? What's the TADAH? Yeah, when did they say it's good to go? I like to have there be early and incremental sign offs. We get away from the TADAH. The TADAH is a lie. The TADAH gives them the sense that, oh, somebody went off, did magic, and there we have it. But it's much more of a, it should be much more of a collaboration than that. Certainly when designers work together, it's a collaboration. And bringing stakeholders in there is only gonna make that better. So if you have, I like to work in Agile, in an Agile project management system. So if you have bi-weekly check-ins with your stakeholders where you show off the things that you've agreed to do, that can and should include design. So if you say at the beginning, I wanna do a content inventory or now I wanna work on typographic basics, you set the expectation for what they're going to see. And then when you meet those, you gain a little bit more confidence every time. So it sounds like it's pretty granular and there's a lot of interactivity with the stakeholders. I like it that way. Just wanna say thank you. The slides are really nice. And I like them because I'm into music a lot. So I appreciate the analogy, thanks. My lack of sleep, thanks you for that. Cool, I think no one else is gonna stand up for it. So I wanna thank you guys a lot for coming out. And I'm online if anybody wants to talk. Thank you.