 So, we're just about ready to get started. I've posted the link for the slides in case you're having any trouble seeing them or if you have trouble reading any of the code that's up here, just in case. So you can follow along or skip ahead, but it might be out of context if you skip ahead. My name is Alexis Findeson. I come from Washington, D.C. I work at Agency Chief. We have an office in D.C. where I live and also in Portland, Oregon. If you're here for modern CSS, you're in the right room. So I have a history in design. That's how I got into development. I started out as an artist in college, got into a design program there. And then when I graduated, I found that my print skills weren't really doing the trick to get me a job. So I learned a little bit of HTML in CSS. Like I'm talking, I knew how to write a paragraph tag and I knew what a class was. So that got me my first gig. And over the years, I've gotten more and more into development. And I'm now a full-stack developer. This can happen to you too. It's a very common story. There are a lot of people on my development team that have the same story. But hopefully, if you are just getting started in CSS or if it's been a little while since you've touched CSS, this will help you learn a little bit more about those new tools. So like I said, I'm from Washington, DC. This is the beautiful reflection pool and Washington Monument. If you've never been to DC, it is beautiful. You don't have to talk to politicians. They typically don't go out on the street ever. So you can enjoy all the beautiful historical landmarks and activities. Right now, we're having the Cherry Blossom Festival. It's lovely. I live right around the corner from the tidal basin. So I get to enjoy these beautiful blossoms almost every day. So enough about me. We're here to talk about CSS and specifically modern CSS. We're talking about Flexbox, CSS grids, pseudo elements specifically before and after elements, because I find that those are the most useful things I use all the time, transitions and animations, blend modes and textured typography. So the benefits of using these tools is basically that you can speed up your site. If you're using more modern CSS, it means you have to write less code, which also means that it's easier. You can save yourself some time writing code. And when you write one line of CSS and it's magic, you get that great job satisfaction of I'm a wizard. So when we start using some of these new tools, it's really important to think about browser support and what your clients need for their websites or if you are a non-profit or a higher ed institution, what you need for your own site to make sure that you're serving your visitors to your site. Because if you have people coming in from IE9 and that's your primary target audience, unfortunately, a lot of these are gonna not perform as well in those older browsers. But there are some fallbacks that we can talk about to give the better display to people who are coming in on newer browsers and give you that modern edge, while still providing content to the people in those older browsers. So in order to do this, we need to be organized. We need to make sure that we're covering our bases. So testing is really important. Every time you try one of these tools out, I highly encourage you to pull open a browser stack or a virtual machine or even an actual physical device to see how it's performing in that environment to make sure that it's doing what you want. Cuz sometimes they're tricky little bits at the end that it'll look great in Chrome, but if you open up in mobile Safari, you might run into some issues. So just constantly doing those little checks will save you from a huge headache at the end of the product cycle. And right when you're trying to launch, you're not trying to fix all of those problems at once. Additionally, you might need to change the language in your proposals. If you're an agency, you might have language in your proposals that talks about browser support or you might not. I find that it's very handy to have it in there cuz that way you can have that conversation upfront and there are no surprises later on. This is really key, don't have surprises on your websites. So what we've done is we support two versions back of the most recent browsers, which means that we support IE 11 and Edge, as well as the last two versions of Chrome, Safari and Firefox. So your language can vary depending on the kind of people that you're working with but this is also something that can be negotiated in that contracting phase. And then finally, you need to make sure that your team's on board. If you are trying to use textured typography, for example, and you're a designer and you have this beautiful SVG rendering, but it doesn't show up, then your design might have some issues. So making sure that you know where the graceful degradation is gonna happen. And so that everybody on your team knows that way you don't have to have those awkward conversations later on. So here's what you all came here for is for the actual code and how you use things. So first up, I'm gonna talk about Flexbox. This is actually my favorite piece, that's why I put it first. Flexbox is incredibly powerful and you don't have to write very much if you don't want to. Flexbox is really useful when you need to have things essentially float next to each other, but you don't wanna have to write floats and widths and worry about how tall each item is. It's basically gonna do all the thinking for you. This is also useful if you have like a card kinda design where you need things to be equal heights and you don't wanna write JavaScript. JavaScript is loading later on than CSS and CSS can perform better for you. So why do it in JavaScript if you can do it in CSS? It's a little quicker. And then also, you can do some things with Flexbox that are a little tricky. You can change the DOM order with Flexbox. Now, this is a little bit tricky. You have to be careful that you're not moving content around in a way that will fool screen readers. So I find that this is most useful when I'm moving images around. If I'm moving an image to be before a heading or after a heading, say, when I'm transitioning from mobile to desktop. So just be careful about how you're rearranging that content, but otherwise it's really powerful. So we have an example here. This is from the National Parks website, NationalParks.org. And this site was built two years ago now. But at the time, Flexbox had just come out. And so this is actually a mixture of Flexbox and Floats. And I used Flexbox to get the height of the card, which is not totally apparent on this screen, to match the bottom edge, even though the titles are varying lengths. And then likewise on findyourpark.com. These bottom three buttons, planyourvisit, foundmypark, and share on Facebook. These have Flexbox applied so that as you're resizing your screen, as soon as there's not enough room for that text to fit anymore, it's gonna break that third button down into that next line, just like that. And if you're on a big screen, like say one of the massive Mac monitors, or if you have an ultra-wide, then they'll all sit next to each other. And all you had to do is apply one line of CSS. You say, display, Flex, it's amazing. So you can see here that I'm sitting next to each other. So the key here is to apply the style to the parent element. You will have some adjustments that you can do on the individual items, but the really key point is the parent. So we're talking like, if you have a list of elements, you would apply the display Flex to the unordered list element, not to the LI. So these are all of your options with Flexbox. Like I said, display Flex is all you really need. That's gonna get you started. As you continue to develop, it's key to add these in incrementally. Because if you do it all at once, without really knowing what each item does, you might get ahead of yourself or get overwhelmed. So I encourage you to try this. Spend 20 minutes to one piece, spend another five minutes to another piece, gradually add things. And that'll make it so that you're not going crazy. So FlexWrap is really powerful. I want to talk about that one in specific, because this is what I find myself adjusting most often. If you have items that you don't want to flow to a second row, you'll apply no wrap. And that'll force them to all stick into one row, no matter what. But if you want them to wrap, like say, you're doing a staff listing page or a listing of blog posts, that kind of thing, you can set it to wrap. And that's pretty straightforward. The other piece here is FlexDirection. So I've been talking about row a lot, which is a pretty typical use case. But you can also do column, which is incredibly powerful. I haven't found a lot of use cases for it, to be honest. But if you do, let me know, tweet at me. So then you can perform overrides on those internal elements. So if you have a property on the parent that you want to apply to all of the elements inside, and there's one special case, there's one item, you always need the first item to be bigger than the others, for example. You can set that with one of these overrides on the individual item. So alignment and grow and shrink, all of those can be overridden here. So alignment basically has to do with where it vertically lines up with the siblings next to it. Flex, grow and shrink, that allows it to expand and contract based off of ratio integers. So if you set flex, grow to one on one list item, that will expand larger than the rest. And for example, if you wanted to have a very specific ratio, you could set one item to be flex, grow two and another item to be flex, grow one. And the first item would always be double the second one. Makes sense? Pretty straightforward. It's easy, right guys? All right. So here's the tricky part. When not to use. So there are always caveats. So if you need specific widths at specific breakpoints, if you have a very pixel perfect kind of design, I wouldn't recommend using Flexbox. That said, maybe you can have a conversation with your design team or with your client about having a little flexibility there because it'll perform better across all devices. You won't have to write as much code. It'll save you time, which saves them money. It all stacks up to beautiful things. And then again, just talking about adjusting the order of the elements. So if you set an item to be flex order one and another item to be flex order two, it doesn't actually matter what order they're printing out originally. They're gonna go one and then two. So if you do that and you move a button, for example, and someone is using their keyboard to navigate and they're tabbing through, they're going to hit that content in the wrong order from what you're intending from the visual side. And we want that experience to be consistent for all of our users. So it's very important to be careful about what you're moving around and when. And then browser fallbacks. All right, so this comes from caniuse.com. This is a great website that will give you all of the issues that might still exist with certain browsers. So it's a very long list, but it's not actually all that bad. These are all very specific use cases that will maybe cause a little hangups. So example, like flexbox in button elements in Firefox 51 and below. I think we're now on like 80 something. So there are a few of these that aren't that big of a deal, but again, testing is what's gonna do you the most favors here. For all of the tools in this deck, essentially if you're in IE 11 or up, you're gonna be in pretty good shape. IE is always gonna have more problems than other browsers in some cases because they got a little ahead of themselves, but they were trying to be ambitious, it's cool. So next up we have CSS grids. So originally I called this Pinterest C layouts, but that's not entirely accurate. Pinterest C layouts are more like vertical flexbox, I guess, in that you can set a column and then if it wraps it goes to a second column and then a third column and then a fourth column. But CSS grids, instead of working in one dimension, they're working in two. So you're setting things both based off of vertical and horizontal positioning. It's quite a bit like using absolute positioning except CSS grids are more responsive. So with CSS grids you can do something like this. I did not use CSS grids for this because this is that older site. But if I were to rebuild this, I would use CSS grids because it would be a lot less code than what I used originally. This is a lot of absolute positioning and setting heights and matching heights and making sure that my images are the right dimensions and my media styles. It's craziness, but what we could have done here is set up a four column by four row grid and that would have solved all of these problems. So essentially newspaper layouts or again reordering elements in the DOM visually or if you would use absolute positioning or JavaScript to achieve this kind of solution where you're calculating the height of something and making the height of something else match with JavaScript, please don't do that. So the way that we do this is to set up our columns on the parent element again, just like with Flexbox, we're setting up all of these rules on the parent element, the wrapper around all of these items that we want to position. So you can use names for these columns. It's really helpful. So on the grid container, we're just gonna set display grid and that's gonna get you going. But then we need to get our columns and rows set up to make sure that we have the actual amount of columns and that they're the right widths for us. So the way that CSS grid keeps track of these columns is actually by the grid lines and not by the grid columns themselves. So if you want to place an item within the first column, you would actually place it based off of the first grid line. And if you want it to go in the second column, you would place it off of that second grid line. But you can think about it in terms of regions within the grid as opposed to the lines themselves, which I've demonstrated in the next slide. So at the bottom here, we've got an individual item where we're setting up where it starts and where it ends. And you can do that on any element in your grid. And when you have multiple items that you're setting in a grid, they don't actually know where each other live or are or move. So you could set two items to be right on top of each other. So that's kind of what I'm talking about with the absolute positioning effect where it just kind of does what you tell it to and isn't very smart about it. So it's incredibly powerful, but used with caution. So here in our grid, we're actually naming our regions now. So once we have our grid set up, we can name what these areas are to say, okay, I have this 16 column grid, but actually it's only four and 12. And I have a sidebar in a main body region. So I don't actually need all of this all the time. So what you can do is you can say, okay, in the first column, that's gonna be A, and then in the second and third columns, that's gonna be B. And the way that CSS knows that you're naming that entire region, B, is that you align your naming with your grid specifications. So if we have three columns, we've got the 150 pixel wide setting here for each of the columns. And we also have three name declarations. But when you want to place something within those regions, you can actually just say grid area and then name. So if I were using this on a site, for example, instead of A, I would say sidebar. Instead of B, I'd say main and then main again. And so item one would be in grid area sidebar. And item two would be in grid area main. Makes it a lot easier to remember. So why not to use this? When simple floats are gonna do this for you, or inline block. Or if you don't need the two-dimensional effect to happen, if you don't need to place something further down on the page or further up on the page, you can achieve this same effect with Flexbox. So this is really powerful when you have multiple columns and rows of sibling elements. But if it's just gotta be in columns or just gotta be in rows, then use Flexbox. And this list for browser limitations is actually a lot shorter. So this one is a little trickier, though. Like I said earlier, Microsoft got very ambitious. And before any of the other browsers adopted CSS grids, Microsoft was like, hey, let's do this. And their naming conventions are different. If you try to set up your grid lines in the same way in Microsoft for Internet Explorer, you're gonna get all sorts of wonky placement. So if you use an automatic prefixer, for example, this is gonna run into some problems for you. So I recommend turning off things like auto prefixer for CSS grid in particular. And manually coding that or using floats as your fallback, using a class from, say, like Modernizer. JavaScript is not evil, I love JavaScript. But I like to use it as a utility for those kinds of fallback situations. So next up we have pseudo elements. So this is before and after elements. These are incredibly powerful. Essentially what you can do with these is you can place any content or treat it like a div without having to modify your actual DOM, without having to write extra twig functions to print out an extra div over here and without having to adjust your fields to do this for you. So the really helpful thing here is when you're doing icon work or if you have other responsive ornaments that you need to place. Things that don't have content in them. They're purely visual ornamentation. You don't wanna use this for content again because we wanna make sure that people using screen readers have access to this content. If you put content in a before-after element it's not gonna be red. So this is an example of a before element that's just acting basically like a div. And the way that you do this is to add this before syntax. And I've seen it both ways, the single colon and double. It works both ways. I haven't actually had a problem. So I used the shorter one. Again, fewer clicks, I'm a lazy developer. So if you leave your content declaration, this is the most important piece, this is what's gonna actually give you your pseudo element. Content, you can place either an icon reference in here for your font file or you can leave it empty and just put some quotes in there. And it'll give you essentially an empty div without actually having a div, it's a pseudo element. So in your inspector what you'll see is that that element that wasn't expandable before is now expandable because it has a pseudo element on it. And then you can style it any way that you want. You can do normal declarations with it. Put a width and a height and a color and a position on it like you can move it around the page and do what you want with it. So I find that these are really powerful. And you can use these in conjunction with hover states and like checked and focus and all of those so that you can really start to build a beautiful system where things move and respond. So just reiterate. We wanna be inclusive for our entire user base, especially for people using screen readers and for people who are using keyboard navigation. So what you don't wanna do is if you have like a menu hamburger icon, you don't want to place open menu inside of your pseudo element because that's not gonna be read. Otherwise they're really well supported. So you can't put inputs on, or you can't put before and after elements on inputs. So Drupal gives you this very handy wrapper around all of your form fields. I recommend placing your pseudo elements on that. That's what I do. It works pretty well. The other thing is that if you use REM units in Internet Explorer, it's not gonna read them. So with pseudo elements, I try to use pixel or even view port height units sometimes. So you have full control over these elements just like anything else that you would in the DOM. So transitions and animations. This is where all of these pseudo elements really come into play. You can do a lot with these. You can also apply transitions and animations to other elements within the DOM. Text, links, images. You have full control of your site and all of the styles that are going into this work. So if I can get this to play. So this is a site that we have in active development right now. But you can see here we have a hamburger menu. We're performing some transitions on this and all of this is done with a simple class change. So we're setting a click event in JavaScript and then altering the class on this button. And then actually all of these lines are pseudo elements and the close menu is a span within that button that we created. But you can see there's a little bit of motion from the close menu. It kind of slides to the left as the opacity fades in. The hamburger lines are opening and collapsing onto themselves. And these are all based off of top placement and left right placement using relative positioning. And so this is a simpler example. Let's skip that one. But buttons, oftentimes you'll wanna change the background color when you're hovering over a button. And it's really simple to create a gradual transition for that with again one line of CSS. So first up we're gonna talk about keyframes cause there are a couple of different ways that you can animate. That first animation is done using keyframes. And what you can do with this is set up either repeating actions or complicated actions that you want to perform all at once. So using keyframes, you're gonna set up essentially a map of what you wanna happen during the animation first. And so that's where the at keyframes syntax comes into play. And then the percents here are the time in the animation which you'll set the actual, oh I want this to be two seconds long, I want this to be 10 seconds long later on. But this is saying at the very start of the animation which is 0%, I want it to start like this. And at the end of the animation at 100%, I want it to end like this. So usually what I find that I'm doing is I'm using the 50% mark to set the in-between state. Like if I wanna hover over a button and have it go like bloop and go up a little bit and then come back down so that it rests into its natural state, I do that with the 50% mark. So you have some control over what's going in here. When you actually go into apply, you're going to add your animation. This is the long hand just to go through the individual aspects here. But you can set your animation name. So you can see I named my keyframes bounce. And so then I'm just calling bounce later on. And then I'm setting my duration which is usually in seconds. A lot of these I use short spans of time. And then iteration count is how many times you want it to repeat. The direction, I actually don't use that very often but you could have it go in one direction and then reverse. And timing function is really helpful here as well because if you have in JavaScript, if you want to have something move across the page and have a little bit of personality to it, you might want it to follow a cubic bezier curve. This is something that I go to generators to build. I don't try to figure this out on my own. It's complicated math. I don't want to do math at work. I'm a developer, not a mathematician. So I go and I find that somewhere else. But there are some really easy shortcuts that you can use as well like ease in, ease out, and linear. And animation delay is really helpful if you want something to happen a little bit later. And this is helpful if you're doing step to animations, if you have something going on first and that's gonna take four seconds and you want your second animation to happen a little bit later, you can set your animation delay to be four seconds. So that happens after on the same element. And then the shorthand for this is down here at the bottom where you can just say animation and then write out all the things that you want to happen. So the really simple way of using keyframes is just to say animation and then call your animation name and set a time to it. That's all you need is the name and the time. So next up is transitions. These are a bit simpler than keyframes. I use these on almost everything. But I use them for really simple subtle things. Most of times for button background color changes or for link text color changes or you can use this on borders if you want to change your inputs to have a brighter color on focus, for example, you could set a transition on the border color so that it transitions gradually. So here you can see this is the full syntax. You can include all of these different settings on your class. But all you really need again is the property that you're changing and how long you want it to take. So what I usually set this on is say button hover or on input focus. You can do this on a full div if you have an image that has a color overlay on top of it and you want to hover over it and have that color overlay fade to opacity zero, for example, you can set this on that div and it'll gradually transition for you instead of just clicking over. So again, more ways to get around JavaScript, more ways to create beautiful animations. Again, these are very similar to the key frame settings. CSS doesn't like to be complicated. So these are the tools that you have at your dispense. And so what I would caution against is doing this too much. Again, I say that I use this everywhere. I do, but they're subtle. So if you have a button that goes from navy blue to light blue, this would be a nice way to add a transition. But if you have something and you're trying to make it zoom across the page, it might be a little distracting, a little jarring for your users. So it's important to think about, okay, if I was coming to this site and I was looking for information, would I find this distracting? And just kind of reel yourself back in a little bit, have conversations with your design team about it to figure out how much you actually want to put into the site. So that's why oftentimes these go into those those more subtle places where it makes your site feel a little more polished and just beautiful and it's that je ne sais quoi that you just can't get without it. So the real tricky one here is the older browsers not supporting transition animations on before and after elements. It's not really a huge deal because the element will still move. It'll still do exactly what you're telling it to. It just won't have that nice transition. So this is Photoshop for your website. If you are familiar with using Photoshop filters like overlay or saturation, color, those kinds of fades on top of images or text, that's what blend modes are gonna do for you online as well. So in case my video doesn't run on this one, I have a backup. So you can see here, we've got just a plain div with a blue background and some white text. And then there's a photo behind it. And I believe this is the MLK speech. If we apply transition elements, which is not playing again, but, for example, this is a hard light filter that we're placing on this div. And you can see through the div a little bit now because it's trying to blend with the thing that's behind it. I've got my mouse, sorry. And then screen does the opposite effect where it's actually lightening everything behind it and itself. So you can use this throughout your site. That's using mixed blend mode. We also have background blend mode. Background blend mode blends the background color and the background image on an individual div with each other. Whereas mixed blend mode blends to divs that are on top of each other with each other. So the list is long and amazing of the types of blend modes you can use. But I've listed them all here. You never know which one's gonna be right until you try it, to be completely honest. Or at least I don't. So again, testing is key here. If you have one of these blend modes that does not apply in a certain browser, it'll just fall back to being a regular div. It'll just do its normal thing. So the key is to place the content on top. Make sure that it's always visible if this doesn't apply. But the syntax is really simple. You just say mixed blend mode, overlay and background blend mode, exclusion. And so the only thing to really remember here is that background blend mode needs to be separate from your other background declaration. It doesn't fit into the shorthand syntax. So again, accessibility you guys. Let's be careful with the kinds of images that we're blending with, the kinds of divs that we're blending with each other. Perform some user testing to make sure that the color contrast is working well. A lot of people have issues with even the different colors reacting to each other. So this is worth testing with an accessibility tester. If you don't have somebody who does that at your company or organization, there are a lot of people who will do this at Hawk and help you and there are a lot of trainings that you can go to. There are also a number of accessibility trainings going on at DrupalCon if you wanna learn a little bit more about that. And this one is the trickiest for browser support because this is one of the more bleeding edge elements. So you're not gonna get any IE support whatsoever for this. That's okay. It'll just look normal. And there are some browser hacks that you can do to make this perform a little bit better in some of those older browsers. But I find that it's better to make sure that your fallback is graceful rather than trying to force it in there because then you're doing more work and we don't wanna do more work. We wanna do less work. And lastly, we've got textured typography. I'm doing well on time, okay. So textured typography essentially is if you are used to using PNGs for your text, let's not do that anymore. You can use HTML text with textures. You can apply solid textures and textures with transparency to text and it's gonna look beautiful because I have an example. This is HTML text. We are parks is I think paragraph tag, it might be an H2. But this is an SVG with the tree ring pattern that is then being placed on top of real HTML text. So this falls back in older browsers to just be white. There's no texture there. And the way that I did that is using a selector through Modernizer to make sure that I had that support. This one is a little bit more difficult to see but there's a little speckled texture happening on this navy blue text. This is an opaque texture. The opaque textures have better support than the transparent textures but it's gonna be a similar workflow for you. So you can see here that there's a little bit of a difference between transparency and solid texture. So with solid texture what you're doing is you are applying background clip text to a background image on the text which means that your fill color in Firefox has to be transparent or else you're not gonna see your texture. So on text that is navy blue, if you set the color to be navy blue, it's just gonna be navy blue on top of your background image. So again, being really careful about which browsers you're applying this in will save you some heartache. SVG with transparency. I like to set my fill color on these ones to be a very, very, very soft same color of the texture that I'm applying just so that I can see the outline in case it's not applying right. It's a helpful testing tip and usually people won't be able to see it because the texture is a higher contrast. So again, you're just setting a background image. In this case it's an SVG image and then we're setting background clip text again. So really the important thing here aside from testing your browsers is to make sure that you don't have really strict requirements for those fallbacks. Again, this goes back to proposal language and contracts and talking to stakeholders to make sure that they understand what's going on with the site and that you're writing the site to be future forward and not backwards facing. So talking about how it's going to be a solid piece of text in an older browser. So the last bit here, the at not asterisk root. This is one that I've used a few times. This comes from browserhacks.com. It's essentially a browser specific selector that will help you frame this CSS so that it's only in the one browser without having to use Modernizer to grab a class. There are similar browser hacks for all of these different techniques and you can find those on browserhacks.com. Use these lightly. You don't want to use this across your entire site because if a new version of a browser comes out and all of a sudden your text is broken, you don't want to have to go through 50 different declarations to remove them all. So what I recommend is using a SAS Mixin to set these styles and that way if you do get an update, you can apply the update statewide. All right, so this week is all about Drupal. I know this is only about CSS, but this week is about Drupal and as part of the Drupal community, it's really important for us to give back. If you can attend the contribution sprints on Friday, I highly recommend you do it. It's a great way to make friends. It's a great way to see the people that you've been hanging out with all week and it's also a way to give back to the tool that you're using every day. And then a little plug for our local con, Drupal GovCon will be this year, August 22nd to 24th at the NIH in Bethesda. It's just a little bit north of Washington DC and it's entirely free. Registration is limited, so make sure that you sign up early if you want to come and we're also accepting session submissions if you'd like to speak. So I have all of my main references here. You can go to these sites. The slides are up and these are linked so you can just follow the links straight through to the sites. If you want to tweet at me, my handle is at AC Find and I'm happy to answer any of your questions now. Yeah, would you mind using the microphone actually so that we can get it recorded? Thank you, Carl. I know when going through and using BlendBodes, when it comes down to colors, that at least in Photoshop, there were click keyboard commands so you could go and tap through a lot. Is there anything available or even remotely comparable for web tools right now to do this? Chrome Inspector is really helpful. When I'm setting BlendModes, for example, if you tab over to the, where you're actually setting the style, you can keyboard down with the arrows and it'll give you a list of all of the applicable filters. And so that's how I really quickly check between overlay and screen and all those to make sure I'm getting the right effect. All right, I'll try that, thanks. Cool. Any other questions that I can answer for you? All right, thanks you guys. Have a great con.