 to modern HTML and CSS. I'm Crystal Malloy, and I'm a front-end developer working on pattern fly, and I specialize in CSS. And hey, I'm Jen Giordino. I'm the accessibility lead for pattern fly. So this is the second of four sessions that focus on the different aspects of pattern fly, design, HTML, CSS, JavaScript, and accessibility. Our session will focus on how you can modify our design system for your own projects by understanding the standards we use to develop modular components and layouts. With this knowledge, we'll practice overriding and extending variables to achieve open designs. After this presentation, we'll be running through a workshop on CataCoder, a knowledge that we've learned in this session. So we really encourage you to follow along, whether you want to or not, I'll do it. So pattern fly is our CataCoder's open source design system, created to enable consistency and usability across a wide range of applications and new spaces. We have teams of designers, CSS developers, React developers, as well as open source contributors all working together, things like these. With Red Hat having over 50 different tools to create consistency across every screen without the design system, any developer across the globe can take our components and layouts to those screens like these in no time, like UI screen, into different components. So there's a nav, a toolbar, and an avatar component. So here are some examples of components. Components are reusable, independent structures that are designed to fill their parent and don't have margins because of their modularity. They can be used in other components to enhance functionality, and they can be used with other components to create demos. Here's an example of grid layout and stack layout. Layouts are the containers that allow, they allow components to remain modular as they handle the styles necessary to position them differently. Layout styles should never be part of the component. And finally, demos. So here's a form demo and a data list change demo. Demos show how components and layouts specifically can be put together to build more complex structures. If additional style is necessary to implement a demo, you can use utility classes, which will get to labor. So now we'll pass it over to Jen. Hey, so one of the ways that we've been able to make pattern fly as modular and flexible as it is is by using the BEM naming system. BEM stands for block element modifier. It's a methodology that provides a naming convention based on a concept that a UI can be broken down into individual blocks. And that within those blocks, you would have elements that create that block and that you could have different variations of a block that you might need to display. So you can modify that block to have different appearances in scale or color or state. So pattern fly does not follow BEM strictly. It borrows some aspects of BEM. And I'll show you here any examples of the class names that we have. So if you look at the class names on the left, these are examples of class names that we use for components and layouts. So all of our class names start with a PF. This is so that when you're looking at the classes and your application, it's easy for you to identify which classes come from pattern fly. And then the component class names start after the PF have a dash C so that you can easily identify which class names belong to components. And then the very first HTML element for our component is the block. So the block name is usually the same as the component name. So in this case, I have an example of PF dash C dash alert for our alert component. That's the first class that gets assigned to that component HTML. And then within that component, we have other elements. So the way we name those class names is very similar to the block class name where we start with a PF and then we have a dash C and then we have the same name that we use for the block so that you know that this element belongs to that component. And then after the block name, we have two underscores to separate the block name from the element name and then we name that element. So the example I have here is PF dash C dash alert underscore underscore title for a title that you would see within an alert component. Our layout classes follow a very similar naming convention. The only difference is that we use an L to identify those class names as layout classes. And then the examples on the right is where we start to break away from the BEM methodology. The modifiers, if you are familiar with BEM, the modifier classes usually also identify the block or block element that those modifier classes are used for. But when we started off working on the HTML and CSS for pattern fly, we decided that would add a lot of complexity to our system. So we decided to drop the block and element from the class names and just use the modifier. So all of our modifier class names start with a PF followed by a dash M so that you know that it's a modifier class. And then the name of the modifier, the thing that it changes. So in this case, I have PF dash M dash danger that we would use in the alert component to change how that alert component displays so that it can display as a danger alert. When we define, when we create our components, the modifiers that we create for them are specific to HTML elements in that component. So you have to use them as we document in our design system. Utilities on the other hand are classes that you can apply to any element in your application. These are more like helper classes. So if the default styles that we provide for our components in pattern fly aren't exactly what you need for your UI, then you can apply a utility class to slightly tweak how something looks. So in this example, our pattern fly utility classes, they start with PF dash U and then we name the property that you're modifying and then we name the value that you're using when you use this utility class. So the PF dash U dash P dash LG, that's applying a large padding to an element in your application. So now I'm gonna take you through an example of the component in pattern fly so you can see how these class names are being used in the HTML. The example on the left shows two examples of the alert components and then the HTML on the right is the HTML for that example on the left. So you can see that block class name is PF dash C dash alert. It's applied to the first HTML element for that component and it's the entire component. And then the modifier class is also defined on that parent element for this component. It will vary where the modifier classes are used in components. And in this example, it just happens to also be on the first HTML element. These modifiers are changing what colors are used for the icon, the icon background, and then also the title color. And then you can see these alert examples are slightly different. They have different elements that make up that entire block. So the first example has an icon and a title and then it has an action on the far right. And then the second example also has an icon and a title, but instead of an action it has a description. And you can see how those class names are defined in the HTML for those components. As Christy mentioned, components can be nested inside of other components. So this is another component that we have in pattern fly. It's called the alert group. So something to note about this class name is that some of our block names are made up of more than one word. So we separate those words with a dash. So the block in this case is alert group. And that is the container that wraps the elements within the alert group. And the elements in the alert group are list items and we name those alert group items. And then you can see in this example, inside each list item that has the alert group item class name, that's where we then nest the alert components. So the alert group is basically just controlling the spacing between the list items within the alert group. And then the alert component is that block, that individual alert that has the icon and the title and other elements within that block. So now I'm gonna take you through an example of a component that uses pattern fly variables. So variables are how we define the values that are used in a CSS rule set. So in this example, you can see the same class name that I was showing in the previous slides is for the alert title. And in this rule set, we want to define the value for font size. We set that property to a component variable. The component variable name includes the block and element that it's being used for. And then also the CSS property for which it's providing a value. And component variables are scoped to a component. And within that component, that same component CSS file where you saw the rule set, we map all of the component variables to global variables. So in this example, you see the same component variable that I shared on the previous slide. And now it's being mapped to one of our global variables that we have defined. The global variables are how we provide consistency across our design system. And their names are describing the property and then the value that that variable provides. So in this case, we're using the medium font size for our alert title font size. And then this is illustrating how we actually assign a value to our global variables. So first we map global variable CSS properties to SAS variables. And then the SAS variable is where we actually give the value that we wanna use. One of the key things with our global variables is that if someone wanted to use pattern fly and didn't wanna use the default styles that we had allocated to these global variables, it would be really easy for someone to just go through and change basic things. Like if you want it something that's a little more compact, you can go in and make those sizings a little bit smaller if you want a different color value. So you could go through and change the colors that are used. So now we're gonna take you through one of our training modules. So you can see how you can take an existing pattern fly component and extend it using pattern fly variables. Great, thanks Jen. So now I need some mirror, sorry. It's gonna take me some time to mirror the display so that I can follow along with what Christie is taking you through. But if you wanna follow us along, here's the URL to our main website for the training modules. Yeah, we'd really encourage you to if you can. So it's catacorda.com forward slash pattern fly. And Catacorda is an open source training platform that we're currently using to host a lot about pattern fly trainings. And actually outside in the booth we have a station set up where we're testing a lot of these scenarios. So if you enjoy this session or wanna learn more, definitely check that out. Could I get a hand up of people that are gonna follow along? Oh, great, okay, awesome. Just let me, okay, so you guys should see this screen now. And then when you get here, you wanna click on the left box, which is for the HTML and CSS scenarios and just click start course. I think it's a bit slow. Okay, so here you see we have five different training modules and things are all outside in the booth or you can access these whenever you want. And today we're gonna go over overriding and extending variables. So we'll click on that. Awesome, and so now you should see this page here. When you get here, click start scenario. The font size large enough for the people in the audience. Font size is good. Just gonna click start scenario. Okay, that's good. Okay, so the setup here is on the left panel, there's content and then different pieces of code that you'll copy. And the right hand corner is your editor where you see the files that we're gonna be editing. And then at the bottom panel here is the iframe, which will render in the background the code we're adding. So, so the first step is to add code to the workspace. Oh, and feel free to raise your hands if you have any questions, if you wanna make this an open conversation. So, I'm sorry, so before we get started, we're gonna add some code to the workspace that we can modify. The first step is to copy code into your index.html file. And you wanna click the copy to editor bottom below to add HTML to the index file. So you can see Jen's just clicked that button and now her code's up there. And then scroll down in your content panel. And so then for step two, we're gonna set up the new styles that we're gonna be overriding. So there are two blocks in this file. One is the root, which targets styles across the entire application. And then one is the PFC card block, which targets styles specific to the card component. So click again, click the copy to editor button below to add code for the card component to the myapp.scss file. And when the server reloads, you should see a card in your iframe. Does everyone see that? Any trouble? Okay, great. So for step two, we're gonna override pattern fly variables to achieve a new theme. So now that we have the card on our page, we're gonna customize the styles applied to it. First, we're gonna add a new column variable to use inside the card. We're gonna make the links in the card purple. In pattern fly, all of the CSS values we use are first assigned to variables. We recommend doing the same when making customizations in your application. So navigate to your myapp file in the editor, and inside of the root block, make a new variable name called myappcardthemecolor, and assign it to be the hex color for purple. So you can see Jen's just grabbed that line of code there and pasted it inside of the root block. This is because this is a global variable that we've just created. That's awesome. Second, we're gonna override the global link color. So in our current example of the card, the buttons in the photo use this global link color, and we can reassign the global link color variable to use our new custom color variable so that all the properties that use the global link color variable in the card will now use this color. So inside of your card block within the myapp file, set the global variable to use the new value defined as the custom variable. So Jen's just grabbed that piece of code underneath hint, and she's scoped that to the card component. This is because we're overriding the global link color specifically for the card. If we had the global link color at the root, we'd be modifying all of the link colors across the entire application, which we don't want. Is everyone good at this stage? Okay, so the third step is to change the front size of the title in the card header. Not all changes require custom CSS. Many components include modifier classes that enable you to customize the appearance of a component. So for this update, we're gonna use a modifier class available for the title component. So go back to your index file, and you can actually command or control F in that editor window to search for a piece of a string of text or a string of code. So Jen's just tapping in PFC title, space, PFM, medium. You could also copy, there's a line of code there which you can copy and search for. But yeah, so you should see that string of text highlighted now, and the idea is that we're changing the modifier class associated with the title from medium to extra large. And then, yeah, if it doesn't reload, you might just have to add a space. Sometimes we have trouble with the reloading, or you can right-click in the iframe here. Does that work? Or maybe add a space after PFM, Excel. Oh, I can't tell. Yeah, I think that changed, sorry. So yeah, so some of the software classes, like Jen was mentioning earlier, we have modifier classes that are associated with those classes. So for a title, for example, there's a modifier class from extra small to Excel. And when the browser reloads, hopefully you will see a card like this. Great, new one. So for step three, we're gonna extend a pattern fly component to achieve a new design. So now that we've practiced overriding variables, let's practice extending pattern fly system to create a new element in the card. First we're gonna add a separator element. So we need to add the HTML markup. So in your index file, we're gonna add the HTML markup for the separator element. And it's gonna be a sibling to the card body. So that means we want it to sit inside of the card header and the card body, as well as the card body and the card footer. So when you're copying in this block of code for the separator, make sure that you put it inside of after the header tag and before the body tag and then after the body tag and then before the footer tag. So then yeah, do you wanna maybe just highlight where you've added the separators in? Yeah, awesome, yeah. And so the class name that we've given this separator starts with my app just as an easy way to differentiate between PF and the new app that you're creating. So once that HTML markup is added in there, we now need to add the variables associated to this class so that we can style the separator. So the first variable we're gonna add is for height and it's gonna use pattern flies global variable for small border width and it should go under the variable declarations inside of the card block. So Jen is gonna grab that, she's gonna add a new line in the card block and then she's copying and pasted the variable for the height for the separator. And again, these are scoped to the card block because the card has the separator element inside of it. Great, so the next variable we wanna add is for background color. So Jen's copying that line of code there and then she's gonna paste it inside of the card. And you can also see the naming techniques that we've used that Jen mentioned in the slides before. And the third variable we're gonna use in the card is for margin. So copy that line and then paste it into the card block too. And nothing should happen in your iframe right now because we haven't set the variables yet. We've only declared them. So for step five, we're gonna assign the variables for the separator element. Cool. So we wanna add this as a new block under the card block. So basically when you declare the variables, they're not actually set to the properties that are gonna be in the separator element. And if you grab that block of code and paste it under there, you'll see we have a property for background color and that's set to the background color variable, same thing for height. And then for the margin, we wanted it on the right, the bottom, and the left, not on the top. So we repeated that margin variable three times so that we could add it to those three properties. And hopefully when you reload your browser, you should see the card appear like that with the separator elements. Great, okay, so now for step four, we're going to add a pattern fly class for the layout. So now that we've updated the card design, we're gonna add several cards and then use a gallery layout and organize them using a gutter. So we've kind of done the work for you. If you click the copy to edit the button for that code block, it'll now copy and paste four different cards in your index file. So Jen's just scrolling through there. And so layout classes in pattern fly are super easy to use. This is like one or two steps of copying and pasting and then being able to add a layout. So in this case, scroll down in the content side and we're gonna go to step two. Really slow. And so what we wanna do, so sometimes when you add layout classes, you'll add them to the component. Other times, you'll create a wrapper around the component and then you'll add the layout inside of that. So in this case, since we have all these cards, we wanna create a wrapper around the cards where we could add our layout. So Jen's just adding an opening div tag to the top and then to the very bottom of the file, she's adding a closing div tag. So now that we have this parent wrapper that's around the cards, we can add classes to it that have styles compared to it. So Jen's typing in, you can also see this on the content. You can copy and paste div class equals PFL gallery, which is one of our gallery layouts. And so when that reloads, you should see the cards lined up like this. The gallery layout uses grid styles and then it uses grid columns to, I think it's 250 picks, I've put some amount that gives me a little width. And then like our components, layout classes also have modifier classes that are used with them. So for example, the gallery class has a gutter modifier that you can use with the gallery to create spaces in between the cards. And yeah, it's probably really faint, but there should be spaces in between the cards there. If you scroll down, there should be space. I can't really see. Hopefully you can see on your browser, but space on the top and between the cards. And so that is the end of our workshop. But as we said, we have four other ones that we're testing out right now. So if you wanna learn more about Pad and Flight, then yeah, definitely check out the booth outside. And I think that's all. Does anyone have any questions? Do you have a mic for me? Yeah. Thanks for your talk. Thank you. Very nice. I had a question about the structure of the HTML. There's like, I see a lot of diffs. I was wondering why not? Why is a card not an article, for example? Why is a card not an article instead of a diff? Like, semantically speaking, the layout seems rather, like it has a lot of diffs. Yeah, so the elements you use should be based on the context that... Wouldn't affect my styling. It would just work exactly the same if I pick an article. Okay. Cool. Cool, thank you. Nav component, we have an example on our website where it's using the nav HTML markup and then it's also using dibs so that whichever context you need it in, you can grab it. If that's all, then we'll wrap it up. Thank you everyone for listening to us.