 Welcome to another episode of GUI Challenges, where I create interfaces my way and then I challenge you to do it your way. Because with our creative minds combined, we're going to find multiple ways to solve these interfaces and expand the diversity of our skills. Today's GUI Challenge is a settings page. And there were so many little things that were really important to me in here. Look as I get hover feedback on the thumbnail. I get hover feedback as I hover over the labels. I mean, look at this auto fit grid layout that stays centered as the page changes. I love it. Look at how it's working across browsers. We can see Safari here in the top right. Sliders look good. Checkboxes check on and off. Notice how they're dark here. Safari on mobile works great. You can drag every one of the items. You can also tap anywhere inside of here and change it that way. Here, scroll and get our checkboxes clicking anywhere there. I just think it's really important to have these really dynamic click areas here. I like it when you guys provide good feedback. Again, we're working across all these different browsers. Our cursor is changing as we're hovering on these. And down here, we're emulating the light color scheme and a prefers reduced motion. So as we go through these demos, notice that this isn't scaling up the little thumbnail and the color here isn't scaling. It's just instantly coming in where it's down here in chromium. Look, we have a nice scale happening here. And as we drag, we see the color highlight there as well. And last we'll do Android here. Looks good. We can drag this along the different pieces. And I noticed that if I click and hold, I do get focused within. So that's kind of like a little fun thing to show in there. So that's it working across all the browsers. And now I wanted to show you how I did some of the responsive space. And I mean that like this. Here's our layout. It goes from two columns to one column. It has a spacious minimal mode, as you can see, like lots of space around our elements here, and a compact mode. That's a lot smaller. Now I want to kind of demonstrate this a little bit better with our layout panel. Let's turn on the main, the form, the section, the header, its field set item. I think that's pretty good here. We can get another one. Ah, that's good enough. And then let's also launch Visbug and use our padding tool to see the padding on main and like a couple of these field set items. All right. I'm going to hide Visbug like that. And I'm just going to contract and show how the padding and the alignment are all in sync with these custom properties to create a nice grid. And look at this. Right as the padding in those two columns can't fit anymore, boom, the grid auto fit algorithm decides that they need to wrap now, which is kind of cool that it does that. And here we go. We've passed a little bit of our block padding there. As we shrink more, there's our compact layout. So we just switched from here to here. Let's check that out again. Here's our minimal layout. It's nice and spacious. And our compact layout, which then also turns into a flexible layout. Okay. We can watch it flex down. So most of this is gap that's coming from our spacing. All this is padding. So in our mobile layout, there's almost no alignment that's helping us with our spacing here. But as we grow, we can see that alignment becomes really critical here to kind of creating all that space. The CSS for this is kind of awesome. We have our main tag, which is set to display grid with a gap of extra large. So that's even on mobile, we have an extra large gap between those two cards. We have place content center, which we saw working as in a single column layout and the double column layout that we're placing our content in the center. And we have a small amount of padding. But here's where our responsive padding kind of comes in. We've got a media query that's nested here with the sort of modern syntax of width is greater than 540 pixels. Change the padding to spacing large. If we have more than 800 pixels, change the padding to space extra large. And that's how that one's operating. But let's also look at this form. How is it working? The form has a max width so that the auto fit min max algorithm here knows that it can expand up to that size. I know that sounds a little weird, but maybe that's something for a different show. We also have display grid here specifying a gap that's different with its row and its column gap. And here's where that auto fit magic is. We're repeating a concept here. We're repeating a template concept and it's called auto fit min max. So it's auto fitting these logistical items here and at its minimum, it can go to 10 characters, but maybe it can expand up to 100%. Also, if 100% ends up being bigger than 35 characters, we want to be able to go to that. And then we want to try to always be 35 characters. And this is critical here, aligning items to flex start here. I'm going to go toggle that in DevTools. All right, let's target our form element. Here it is. Let's see the styles and I want to change the align items. I'm just going to turn it off. And look, we sort of break some of our alignment. We were no longer aligned at the top here and our bottom has been stretched. That's definitely not what we want. We want to align these form children to their flex start so that they can bring their own height. We don't want the stretching. And so I thought that was a pretty critical addition to the layout here that might be small to notice at first, but I think has a big impact on the way the alignment works. Next, I want to talk about how it's responsive to color. I mean, you can tell that it's got a light and a dark theme, but maybe you didn't notice that these checkboxes were dark themed, and these ones in Safari were dark themed. I'll go turn that off in my HTML. Yes, my HTML, I will turn that off. I'm going to get rid of this meta tag called color scheme. And look at our checkboxes. We have white checkboxes now, nice bright blue. And we're back to white checkboxes down here in Chrome with bright blue. I'm going to put that color scheme tag back in, save, and go back to the result. And now that is some cool color work, right? We're responsive to the dark and light theme in our form controls, and we've done that with a meta tag in our HTML. I loved that. We're also responsive to the colors on the page. You can see here's our light theme and our dark theme. And I'm just flipping some variables in a media query. Another fun thing about color that's responsive here is if you look at the top of the page here, it's nice and bright pink. As we scroll down, this one just turned more purple. Okay, keep your eyes on this. This is purple, right? But as it gets up here, it starts to turn light pink. That's because I have a fixed background gradient that's covering this whole page from top to bottom that's deep pink to purple. And each of these are opting into using that as their color and it changes based on scroll position because they're like little windows into the gradient that's fit on the page. I just think it's this cool technique and it's also responsive to page size, scroll position and all these things. It's just so neat. You'll find it in a lot of my demos. This demo is also responsive to multiple types of input. I just love doing this. We've got mouse interaction. It looks beautiful. We have keyboard interaction. Looks awesome. Can go all the way to the checkbox and do it. We can also use the screen reader. We have really nice support here. In fact, Lucas, will you turn off the lights? I wanna showcase this. You are currently on a main inside of web content. All right, I wanna just change the alarm volume. Let's travel along the path that is built into the HTML here. Let's hear it out. Heading level one, settings. Heading level two, sound and vibration. Adjust system volume channels. You are currently on a text element. All right, so we've pretty much just gone through the header so far, but it sounds like we're in the sound and vibration area. So let's move forward. Four, media volume, two, call volume, five, ring volume, five, alarm volume. All right, alarm volume, that's the one I wanted. So I'm gonna set this down to two. It's just too loud. Four, two. And that's it. Let's turn off the voiceover and Lucas turn the lights on. Voiceover off. Cool. Next, I want to show some of the JavaScript because if you see down here in the console, all of our changes have been logging things. Let's go see how that's working. All right, here's the JavaScript. We're stashing a couple of selectors. We're grabbing the form element and all of the sliders. So we're looking for input type range. We have a function here that takes the slider element. It looks for the maximum attribute and it looks at its current value and it returns a percentage for completion. That completion is used to fill the slider with this track fill. So on page load, we go through each of the ranges and we set the property track fill to whatever their completion is. And so that's what CSS can fill that track with a nice gradient. Then we watch each one of these for any changes and as they change, we set that property again based on that range to percent function. So that's what's keeping the sliders filled. And then we're logging all the changes to the form by watching the form for input. We're making a new form data object from the form itself, converting it to object from entries or converting it with object from entries, which is allowing us to console log the nice JavaScript object. And that's how that console log is looking down there. And I just thought that worked out really nice, right? And while there's so much more I wanna show and tell you, this was mostly a show. Watch out for that blog post article for all the ways that I can tell you about how I achieved this. And I'll see you on the next GUI challenge. Thanks for tuning in, y'all.