 Welcome everybody to this workshop on building user adaptive interfaces with media preferences. I'm Adam Argyle. I'm super stoked to walk you through this today. It's marked as a beginner workflow today or like a beginner task, but let's just say the beginner aspects of this is that you'll be going for a ride and I'm gonna take you on this ride. You're gonna copy and paste code and see it react in the page sort of update with your changes, but just know that this is jam packed with various things to learn about today about CSS and just building on the web. We are entering a new type of web where things don't just change to the screen size, they change to my operating system and the preferences that I've made on that and the way that those flow into our page can get us into this new era of user adaptive interfaces. And so we're gonna program our entire, all of our code today is in this premonition that we want to be building for user adaptivity. We want the choices of our users to be reflected inside of here. So, okay, that's what we're doing. Here's kind of what we're building. I like dark themes, so that's why we have a dark mode user settings page down here. And if I go into like a mobile view, you can see it go into a mobile view, right? Okay, so nothing too surprising here. This is basically kind of like responsive design, but what we're gonna get into is sort of these really small details and decisions that we're gonna make from the ground up that put the user first. And so let's talk a little bit about like user preferences. Like your device that you chose was a choice. It's an option for you, whether you were on mobile or desktop, these are things that you bring to the table. It also comes down to like, what language do you have set on your device? What language do you, in direction do you like to read? And these are all things that should play all the way into your page. You're here to just consume some content, right? Like we're in this era now where the page can bend to me instead of me bend to the page. And let's look at like some more of those things that we can do here. So we have like device viewport. We've talked about that before. This is like, we have 10 years of like device viewport reactivity in our layouts and stuff. Device orientation, so we're rotating it. Font size has been something that's been around for a while, but it's often overlooked where the user, they can choose a font size in their browser and you have a choice as an author to collaborate and not use it or to build upon it and sort of work up from it. And so that's what I mean. We're gonna be using relative units today. And for one thing is font size. We're gonna be making sure that that user's font size is respected in our application. Online, on offline, network connectivity, color scheme. You know, this one's really popular right now, light and dark, users land on the page and they don't know what theme it was originally built in and it's not the brand theme. It's now adapting to me as the user. We have interface animations that can know whether or not you like motion or not, right? We have that option in our interface. Let's use that in our pages. We have input like, are they on a keyboard? How are they even interfacing with this page? Are they on a Nintendo Switch? If they're on a Switch, they don't have a mouse. So how are they gonna fill out and use your experience? We don't wanna make sure that we are listening to that. We have document dimension, a direction and writing modes. We have the display mode. So whether or not they're even launching in a browser or from an app experience and then things coming down the pipe or we have like reduced data. So are they browsing in a reduced data saver state? We can change the page. We can change the page based on how many colors their device can display. So if someone's visiting from a older device, we don't wanna show crazy colors there. We want to show just the ones that it can display. There's like where WebSafe was there and now we have colors that go really vibrant these days and these really dynamic screens. And so a user is bringing capabilities, like a device capability to the table. And we wanna make sure that the user doesn't have to think about that. And our application is just showing itself in the best light that it can. And those are just a few of the things that we can look at today and a few of the things that we can look forward to in the future. So we have media queries that's a little breakdown. If you don't know what those are, you can check it out there. User adaptive is what we're talking about now is this concept where a user is visiting our page and we are adapting to them. And we're gonna do that in a lot of ways. So what we're gonna build is we're gonna build this form where it's gonna look like this in the beginning. It's just an HTML document and we'll go over that in just a second and we're gonna transform it into something that's responsive, is liquid and has all these nice animations in it so that you can build a settings page or build a form. I feel like most experiences in the world eventually push you into a form, at which point, hopefully that form is easy to use because that's sort of the money making moment where somebody either creates content or buys something or they don't. So we gotta make sure our forms are good and work well out of the box. So by the end, what we're gonna have is a light and a dark theme just with some CSS custom properties. We're gonna have animations and accessibility. So we're gonna make sure that this thing can be keyboard, mouse interacted, mouse interacted and that the motion and the colors are all accessible. It's really cool stuff that we're gonna work on. We're gonna make sure it is layout is adaptive and we're gonna do this without media queries. We have one media query that checks to see the device orientation but otherwise we try to do this very intrinsically and this is sort of an advanced layout topic is intrinsic layout but we're gonna be implementing one of those today so that it's responsive without a media query just sort of folds into the space if it can or not. So it's sort of you're agnostic to the device anyway and then we're also gonna use relative units and logical properties. Relative units are units that we can use to respect a user's preference and build up from there and logical properties are a way for us to not care about the direction of the document whether someone's reading right to left, top to bottom, bottom to top. We just wanna be agnostic to that. I just wanna lay it out with how it looks for me now. Logical properties, let us do that where we can define the space with the way that it looks and my language and my computer right now but anyone opening it up in a different language and a different writing mode, different direction they'll see it natively and naturally in theirs with all the spacing appropriate and it's just really cool. So what you'll need is just a browser doesn't necessarily have to be Chrome and let's dive into the next section here. This is getting all set up. So there's a few ways to do this you can go to GitHub. So I have the repository here you can find a link in the code lab. I recommend though using CodePen. So if you just follow the CodePen link and click the fork button right down here at the bottom right, that will just make a copy of this entire project and you'll get CSS live reloading, HTML live reloading all that stuff for free. You only need an account on CodePen if you wanna save it. So if today you just wanna kind of follow along in the workshop, don't even make an account just fork that CodePen and start working along with me and everything will be fine. If you want to though you can work locally download the code. I used Veet as a build system and it's nice and fast and very minimal and shouldn't put a whole lot of files on your computer. And yeah, that's a couple of ways to get started there. I wanna talk briefly about the HTML and we'll get into that because this is not an HTML lesson this wants to focus on CSS. So I had to kind of not do some things with y'all in the workshop and one of them was write this HTML. So I'm providing what I feel as a reasonably semantic document form that tries to include as much as it can without any styles and we'll briefly go over some of that stuff but that's about the HTML and about kind of getting set up. And hopefully you have had enough time now to open up the CodePen, hit that fork button and you're just ready to go. You're ready for like what's next. So let's check it out. Our next step here is adaptive interactions. All right, so our form, our document needs to be interactive. Now CSS can kind of facilitate some of these things but HTML gives us a lot of these for free. And by the end of this we're gonna make sure that we have a form that is gamepad and keyboard ready, mouse and touch ready and screen reader or similar assistive technology ready. And we're gonna do that by so I'm gonna kind of skip over some of the writing in here in the CodeLab in favor of filling in some of the gaps. Like this is a very advanced and beginner type of lesson. So I'm gonna try to like I packed a lot into the writing and I'm gonna try to fill in some gas audibly here. Like one of the things is this works across all modern browsers and we'll get into sort of when those moments are that you're sort of pushing out an older browser like IE because we're gonna do a lot of our color manipulation in CSS calc with HSL and that just that syntax doesn't work good with old IE. So anyway, I'll try to cover some of those things as well but there will be a push and a pull between the document and our coding here. Okay, so for first one, we have grouping inputs and so you can see that we have settings here is in this kind of weird box and notifications are in this weird box. And those are grouped and that's where grouping those with the field set. That's an element for sort of grouping like typed inputs and I've already got that set up for you so you don't have to do anything there but by using things like inputs and H2s and these sort of other semantic HTML elements we're able to get keyboard navigation for free. We can tab between these but we did have to go modify it a little bit. So there's a little gift there that shows the experience beforehand and after I like to add this CSS down here of outline offset of five pixels and that's just to give this a little bit out put a little bit of offset. So here I'm gonna copy that and just paste it right down at the bottom or CSS. So this is our first old copy paste and now if I tab through you can see that there's a little bit more space around our elements. It's not quite so shrink wrapped. So there's things to try here now that that's there is you can try connecting a gamepad and moving through this you can try using your keyboard. So I'm just hitting tab. If you know how to use a screen reader go ahead and try to use a screen reader and just see what the basic experiences that we're trying to build upon here. Okay, let's talk about a mouse. So a mouse can even be getting like more affordances in a form through just a couple of proper HTML attributes. Now I've already written them in the HTML for you but the way that they work is like right now if you look at the layout even with no styles it's hard to know which title and description is with which checkbox but since we did some proper labeling here and I'll scroll down here and we said that the input was four and the label was four certain input input we're able to hover over our label here and that will highlight the appropriate checkbox. So I don't know if you can see that down here but as I like highlight and you can see this in your demo too is if you highlight the right label and stuff you'll see the appropriate and associated checkbox kind of toggle a little bit in its style and I think that's really important for users to know which one visually right with a mouse like which checkbox is associated with which label and you can create that connection there just in the HTML and then you also get the affordance of you can click the label itself to toggle the checkbox. So you sort of like increase its hit area you create this connection so that the label and the checkbox are tied together anyway it's just a whole bunch of wins and you get it right there in the HTML. Some things that note about a screen reader so screen reader is essentially someone's coming here and they can't see well we have icons which really are only good for people who can see and so one of the things that we do in the HTML here is we put aria hidden equals true on those so I'm putting an icon inside of a picture element and by putting aria hidden on those pictures we now no longer tab through the icon and the label and this item here. We can sort of say hey this is visually hidden I want this to be available for mouse users but screen reader users they don't need to stop on this icon it's just not gonna do them any value right? It's just sort of a necessary stop along the way. So for user experience purposes we can just sort of say it's hidden from you and now as they tab through and they're working through our document without sight they'll skip over the things that were made for sighted users so kind of just cool little things that we're doing in here for this user adaptive form users are coming here they bring their own tools to the table and we wanna make sure that we're handling all those as good as we can. So our HTML has set us up really well for that which is using input sliders, some check boxes and a couple of these little attributes on our elements to connect them to the rest of the thing. So let's move on to our next section into the kind of exciting section the first one which is adaptive layouts and by the end of this we're gonna have a spacing system we're gonna have a flexible and responsive alignment in spacing and we're gonna have a responsive layout we're gonna use logical properties and I'll talk briefly about those and we're gonna write a media query or two just to sort of like finesse those edges. Okay so for spacing let's jump into our first copy and paste task here which is this root copy paste so we're gonna copy and paste all of that and I'm gonna put this at the top of my style sheet but honestly you can throw it right at the bottom if you want it's not that big a deal and you should see no change cause all we've done is defined some custom properties that create a spacing system. It's like a pseudo system and you can see it's just like a quarter REM here so we're using that REM unit. The REM unit I do have some links oh look it looks it's right here mindful of a user's preference if you're curious how the REM is mindful of a user's preference follow that link and study it and you'll see what we mean and so by using a quarter REM here that's our smallest unit half a REM is our extra small small and I kind of liked this naming cause that way a designer or someone could come up and be like that spacing between those two elements can you make that extra large and then you can be like well yeah that's exactly what my custom properties named how did you know maybe that maybe that would happen to you I don't know I hope it does it'd be really fun anyway okay so all we did is paste some variables we haven't used them and so they're pretty much null at this point they're not doing any value so let's add our first set of page styles now these styles here are kind of what some people might call a reset and that's not necessarily far off but it's not a full reset and you can see essentially what it did is it took all the space out of all our elements and that's because right here we're selecting every element we're setting its margin to zero and it's box sizing to border box that might not work for your app but it's gonna be how we start this one we're gonna be using a lot more gap in our layout today and so we're gonna start by zeroing our margins cause we're gonna have container owned spacing where as margin is a child owned space we set the document to a hundred percent height so block size is a logical property for the vertical it's like the way that your paragraph stack in this case it's the height of our document block size is height in Latin anyway and inline size would be with and we'll see that here in a second so then the body is said to min of the block size so essentially we're saying like hey HTML document fit the viewport and the body should fit that HTML document did you know that there's two nodes between you and your other elements anyway so that's what that's doing then we have some padding here we have padding block start and padding block end and they're each using one of our custom properties so we're using some light spacing on the top and bottom of our body block start and block end we'll go over some more logical properties in a second okay so that's essentially what that pasted it was just sort of like giving us this baseline shrinking all of our elements and putting some padding on the body let's do some light typography as well so I'm gonna take this set of styles here and paste them underneath the body selector here if you want you can consolidate these like take the font family here and put it up into the previous one it's not required for today what I want you to really be focused on is what user-centric choices am I making in this code snippet so when we pasted what was our intent and I'm hoping that that's the primary thing you take away from today is a lot of these things are rooted in our user we're thinking about our user so often okay so here's one font family system UI this font family will come from whatever system they've chosen so if they're on their favorite Linux machine they're gonna get a Linux font that looks exactly like their other system apps if they're on macOS they're gonna get the beautiful San Francisco font and it's gonna look like all their other apps essentially you make them not think they're gonna be reading content as legibly as they've been reading it all day because you didn't change it on them you gave them just a sans serif system UI there's even way more cool powers that come with system UI but we won't get into those I set a couple of font weights here on those headers I don't change their size we're just gonna use the native font size and I set this small to have a line height of 1.5 and that's this guy here and that's because by default it was just so shrunk and it was just too tight on the content so anyway that's what those are for let's talk briefly about logical properties okay so logical properties I mentioned is an agnostic way for you to talk about a web layout or a box really it's about a box is a box needs to have content in it right we always talk about CSS is all about boxes and when we talk about logical properties we want to talk about a box that's not necessarily about ourselves so I like to think about it if you ask someone and you wanna shake their hand you could ask for their right hand which would be a physical reference or you could ask for their strong hand logical properties are like asking for a user's strong hand and not assuming that they have a right hand which is really important when you need to do layout that can go top to bottom, right to left or top to bottom and right to left you have to think about these boxes in a way of flow as opposed to appearance so instead of saying it's the left side of a box we'd say it's in English or Latin it'd be the inline start of a box so it can be kind of initially confusing because no one talks about boxes this way but over time what we're gonna have done is aligned everyone in the entire world on how to talk about boxes because we have a way to talk about boxes that isn't about us it's about the box so I strongly recommend getting into these they are a small change to this the syntax that you write but the output is drastically different you're making a much more accessible and international document with your spacing using custom or logical properties so there's also other things about this that you probably would have been getting trained on like you might know what flex start and flex end is or like flex direction row and column these have all been training you with logical properties you just didn't really know it and so that flex start is the same thing as inline start this is thinking about like the way where your writing starts if you were to write by hand that's your writing on the inline direction in English and then your paragraphs stack on top of each other anyway so you have blocks of paragraphs and you have inline you write inline so if you think about it anyway that helps me think about it maybe it'll help you let's get into some CSS today our layouts are all done with grid so I love flex box I think it has tons of merit and but it just didn't end up being in this layout and there's no particular reason I think it's actually just that I needed more sized boxes like I had icons and stuff I'm like I'll just make a column at this size and stick an icon in there anyway grid and flex box are both great at micro and macro layouts but today grid is going to do all of them and then here's a screenshot that shows all the DevTools overlaid at once so here let's check that out that's just fun so if I hit command shift C I'll open up the DevTools and we can see over here on the right I've got sort of grid tools and I can toggle these on and toggle all of them on and start to see all the spacing that shows up in between all my elements here so if you haven't used the grid DevTools they're really nice for that and that's how you interact with them you sort of go into your elements panel and turn them on you can also go over here to the layout panel and toggle them from here but they're all on the list you just turn these on really cool so I'm gonna pop the tools out there I'm also just while we had that open I'm going to open up the DevTools again I'm gonna hit command shift P and I'm gonna go to light theme and I can emulate CSS prefers color light here and just sort of show the light theme I can also do that down here in the rendering panel and I can toggle light and dark from here so we'll be going over some of these things later once we do more color but I just kind of wanted to show that right now while I had the DevTools open all right I'm gonna close that out just to cancel out some of the emulation and go back into our layout so I'm actually gonna pull up the CSS here so that I'm looking more at the styles because we're about to paste a lot more code so here's the layout for our main element and our main element is the primary element around the entire layout so let's paste that at the bottom all right so display grid so what did we get right off the bat here we set display grid with a gap of large gap we put the content in the center and we put a little bit of padding on there the padding is so that when we shrink down we get some of the padding and then the spacing here is really only between this header and these content items here so grid by default creates rows we put some space between the elements in there and we centered it all okay let's check out what's our next one our form our form has our coolest layout also the most complex layout it's the most algorithmic of all the layouts and the most intrinsic and the one we're talking about the most and the one that I've said and the most times with right okay so but if you notice we now have a responsive layout without a media query and how does this layout know to kind of fold up or fold down these additional content boxes well let's talk about that so max width is the first sort of quirky aspect of this layout and what this form needs to do with max width is say how big it can grow to it's not normal for CSS and layout for you to do that but with this grid layout we did need to do that and the reason is we're using this repeat auto fit min max algorithm and it needs to know the absolute largest that it can grow to and a hundred percent is just not a value you'll like not a good value for it it doesn't understand 100% when something is shifting like this 100% could mean just the width at the one vertical and so you had to be explicit with max width we also have two different gaps here we have a row and a column gap and that's so that this gap here in between these two sections is different than this gap here this gap here is larger than this one and in one little definition here we can say the row and the column spacing and so when this thing is folding on itself it has a different amount of space when it's going here and it does here it's just super cool grid is so rad we align the items to flex start and that's so that they don't get stretched we can see that here see how the bottom edge of these isn't the same if we didn't have stretched there those would be the same and then let's get into this algorithm okay so we're saying for each child so this form has two field set sections that we want to be responsive and we're gonna say repeat auto fit min max so we want to auto fit these elements at a minimum and a maximum of we'll say a maximum of 35 characters and we can see here that that's essentially this size that they are they're saying I don't grow beyond 35 characters that's my max and that's what gives this next column the availability to auto fit is it's there's a maximum there and then the minimum is so that we can shrink super squishy and I know that sounds kind of funky but like min max has this issue where sometimes if you set min to 10 characters you wouldn't get 100% flexibility at certain small viewports and anyway there's articles written about what this is doing exactly and why it's so tricky why does min max with a min function included here with like 10 characters 100% and it's just this little algorithmic edge case where when you're getting into a small viewport you want 100% and not 10 characters and that's essentially what we're doing we're saying take the minimum it's either 10 characters or 100% and in this case it's 100% we want that to fill that space so anyway that was our trickiest layout and I'm gonna move on to our section so here's our section, paste this down here look at our HTML so it went form and section so each the form element that we just gave that responsive layout is actually having a responsive set of sections oh right there's sections not field sets because the field set is the border and the section has a header and a field set right so cool this section layout gave us gap between our header here and here and here we can just kind of show that here pop open our dev tools get into our section grid and so here's that section grid we just made here's that form grid that we made and we can see as we respond here the difference in like gap that we see in the middle there versus the horizontal gap and that's because that one definition that we did we can get up in here to the main and see how it's responding and then we can just see all three of these altogether really quick just to see what are they doing and why did we need so many layouts and you can see that just putting space between items often means you need another container and you need items to be wrapped in something so that's where a lot of that came from all right I'm gonna close out a dev tools get back into here and check out our next layout which is on the field set so I'm gonna grab this field set pop down here and paste it and we can see that we dropped our padding around the edge here we went to a display grid which was kind of similar to what it was before but then we're gonna get some ability to put a gap in there notice our gap is one pixel and that's really interesting here if you can see the one that like hairline between each of these that's actually you looking through a gap into the background of the field set so normally you might use like a border bottom and then say if it's not the last item don't have a border bottom because otherwise you'd see like a double border down here but with gap I'm actually using gap as the hairline and I thought that that was just like that's how designers think at least that's how the surface feels or it looks like it should feel like the item should be able to swipe on us anyway whatever this might just be me thinking about it too hard but I had a lot of fun making a hairline design choice with CSS grid gap I thought that was really nice we have a border radius which is using some of our custom properties for spacing so notice our spacing is just sort of like medium and small and large and medium and then we're staying really consistent by using our custom properties and it's gonna be one of the key things that has our layout looking so harmonious is that we used a limited palette of these spacing items so anyway we also said overflow hidden because we set a border radius and we're about to set a color background on that later and we're gonna want that color to be contained in that border radius okay let's check out field set item let me make sure I grab all of that field set item this is the only class or one of the few class names that we wrote and a field set item is for each of these items that sort of has an icon and has a slider and all these items inside of it and we set a display to grid here and look our grid template columns our first column is spacing large and that's actually creating a column here for the icons and then the rest of the item is this 1FR so it's sort of a flexible amount of space and then a fixed size for the icon which I think just makes a lot of sense right you're like here's the space for the icon center that icon in the space and then give the fluid space to the rest of the content there we add a gap using our spacing we add some pacing or padding using our spacing nothing too confusing there I thought that was really nice let's look at our field set item picture and these are for each of our icons and we're setting the block size and the inline size this is again like height and width except that it's agnostic to height and width that will always be appropriate to the writing mode and we're using our space XL so we're taking that icon we're giving it a very clear height and width we're giving it a clip path of a circle at 50% which we'll see later it prints a circle it will clip the element into a circle almost like border radius but I like the syntax a little bit better plus we're gonna animate it we use display inline grid and we place the content into the center great let's check out field set item and we have a cool selector in here using the is pseudo selector the functional pseudo selector here is it has great support these days and I'm here if I pull this out you should be able to see the full selector excellent so we're saying field set item if you have a direct descendant that is a picture or a direct descendant child that is an input type checkbox place them into the center and we see that here so this item is placing itself into the center and these icons are placing themselves into the center they're sort of like claiming center ownership on their own and that's what self is good for because not everything well and that's why it's the direct descendant you can go look at the code then not everything is always a direct descendant and needs to be centered and so this way we targeted just those two elements that need that nudge let's look at our field set item SVG so I'll grab this I'll paste it under here so these are gonna be the actual icon math values that are being used to draw the actual icon so we've created a column and we created a firm box and now we're gonna size we created the box so that we could put a circle around it and put some shape around it like here let's preview over here right so we have this circle around here and as I interact with it it grew that's that clip path and that's that outer box that we're working on right now but now we're gonna work on the SVG inside and we're gonna set its block size to var space medium so essentially we're setting the actual icon size right here and the other things we're creating a box that had space around it so that the icon could be in a circle and that's just yeah this is we're just burning right through it okay so now we have small stack and the reason this is small stack is this was just like a little utility class that created a grid and added gap and I often call this grid just for gap like sometimes I use grid I'll set display to grid just to use a gap gap is that good and here's a kind of good example of it so small stack went on top of numerous elements in here and it's basically just to add an extra small amount of gap between items you can go check the HTML to see where that was but if I delete it here and see that yeah it was mostly up in here oh we're taking the label and the sliders and the labels in these content here and we're putting space between them and we're setting them into a block direction so we could see that those stacked again all right let's look at input type checkbox and it's getting a height and width and see this is I thought this was nice because checkboxes are awfully small even for an abled user with a mouse and you can change the size of them so I have essentially changed the height and width of them right here and make them much more clickable and they render really nice so I don't see any reason why we shouldn't always increase the size of our checkboxes to be easier to use like that okay and at this point we've already done this a little bit we'll just like open up DevTools and look at your various layouts like look at what we have so far okay and all we've done is created some CSS custom properties for spacing and then a bunch of layout work where we took the HTML and we started putting the elements in the right spot and putting space between them and look how far padding and proper gaps will get you that's the majority of the work at least in this case and we've just taken this document and this document will now work in all these other different languages and writing modes because we're using logical properties and grid which will automatically do the sort of directionality work for us at the end of the day so again we're taking this like document that wasn't very good at adapting to users and we're layering in all these different choices to make it more and more adaptive to more different use cases and different types of users it's just so much fun okay so let's check out this one this selector says if the width is greater than 540 we wanna increase the padding on our main like layout and if it's above 800 we're gonna increase it even more so it's essentially a mobile first type of strategy I'll just paste this down here and we can see the spacing on our body changed right there and here if I come back to this layout you can check it out a lot more so here's our body element or here's our main we can see the border around the side here if I open up Vizbug I could even get that main with the padding yeah okay I'll hide Vizbug there so here's our padding at mobile and as we grow you can see we're now at 32 so we're using another one of our custom properties and as we grow even more we've grown to 48 so those are using rems and Vizbug is just reporting the calculated size here but it's nice to see the padding as it's changing and as you resize there so kind of cool little use of Vizbug for a second so that we could see our responsive padding it's like this particular set of CSS it's like gain more space around yourself as there's more space in the viewport because that's an important decision for this main to look more airy and sort of lightweight is to have it sort of start in a condensed mode like it's in a mobile phone and then we're gonna add more space to it as we grow so let's do that again with our form so here's our form let's go up to our form element now you don't have to do this either but I'm gonna here's a custom property that got made called repeat I'm gonna add that to the top of the form element here and then I'm gonna update our grid template columns to have use of our new custom property or actually here I'll just grab the custom property you can copy and paste that whole thing if you want to oh here I did it already I'll just paste and what we did is we replaced auto fit with number of columns and so or we will be doing that here in this media query so by default it's trying to auto fit elements in there but what we've said is if it's landscape and the min width is 640 which is essentially like saying this is a mobile device in landscape I specifically want two columns even if they're kind of difficult for you layout engine like I want them to be that way and so what we're doing is we're pivoting a custom property in that one media query situation that changes the grid template layout to be specifically a two column layout as opposed to sort of an intelligent auto fit so we're grabbing the reins in this one use case which is users on a mobile device going landscape are going to want to see two columns let's make sure it's two and that's what styles are there I thought that was a good user centric choice to make that like it kind of gets annoying if you want to use something in landscape and it still only has like one in the center you're like well I have all this space and it turned out that that layout did not auto fit in landscape and almost all the devices I tested so I went in and I kind of made something more specific and said this is what I want at this point so anyway here's another one we have so this is our field set item we're toggling some items or some values in it in a media query I'll just pop this down at the bottom with our other media queries here pull this out so we can see it okay so this one is if we shrink here we can see that we have like a kind of smaller space here and as I grow you see we gained more space here as we continue growing we gained more space so this is just sort of this concept of like a compact versus a minimal layout and all I'm doing is toggling spacing in a media query you can see in our media query that we wrote here it's just changing padding and changing grid temple columns using our additional custom properties so we're just kind of growing to an Excel growing to a double Excel to gain more visual space and I think just on a desktop you need that air you need that white space to feel elegant and to feel like it's not cramped we're on mobile we're sort of we're accustomed to cramped layouts and they're not so bad so anyway again that goes into this concept of where I'm trying to like build things kind of condensed by default and then I expand them into a more airy and lightweight layout and spacing scenario with media queries as our viewport grows all right so things to try we've kind of retried some of this but if you want to you can check this out on mobile check this out on a desktop and really what we have here is yeah we have a compact and minimal layout that's responsive and intelligent enough on a mobile device to sort of make a smart decision about going two up into two columns okay cool so I'm gonna move on to our next section because that's essentially it for our layout our layout is doing a lot of intelligent things already and we've just used CSS grid to so much of its power we used a lot of really advanced grid layouts there so if some of those felt a little far away for your current skill set don't worry I hope that like using them and seeing them and having me give a little bit of a verbal breakdown helped with those and let's move on to color color is kind of equally intense it has a lot of complexities that can happen inside of there but don't worry I'll try to walk you through today so that by the end you at least feel equipped enough to know why and how you could make a user adaptive color interface like something that adjusts to their preferences so we're gonna have something that adjusts to light and dark at the end something that has color scheme derived from a brand so I think that's just a really primary use case is that a designer will have decided on a brand color or you know you'll get a red or a blue and then you need to build a theme off of that and we're gonna do that today and you'll notice that if you look at my color scheme here in the preview it is kind of a bluish tint to it and that is not by accident if I click on the HTML and I come to the brand area here here's the hue I can change this hue if I hit shift up and down and you see it turning green you see it turning purple and here it's using that hue as a base across so you look now it's kind of pinkish and purplish I'll go back to 200 this is sort of what I mean is you're pivoting off of a hue off of a base brand color and you're building very dark colors from it and very light colors but not necessarily white or black you can make really elegant themes if you try to reserve white and black for the moments when you really want a dark shadow or you really want a white highlight pop and so those are some color tips for you here and we're gonna build that into our system today as we try to avoid using white and black and opt into basing everything off of a hue and build up from there and that's why we get this nice blueish tinted cool dark theme and we'll get a very nice, well here let's just see Command Shift P, let's emulate light see even this has a little bit of a blue hint to it they are very light gray but also very light blue gray and I think most users might not notice but they will know that there's a harmony here and so let's build that harmony I'll show you how I did it and we're gonna build accessible colors so like if I launch Fizzbug here and I grab the accessibility tool I can hover over all of these different colors and know that they are accessible, right? Great, passing, passing 12.45, 7.27 Okay, buy Fizzbug and hello colors let's go back to Code Pen and start setting up our brand channels so I go through a little bit in the workflow here that we assume the color is pound zero AF so I'm actually gonna let's open up DevTools again Command Shift C, I'm just gonna click something come over here to the styles, hit color and I'm gonna paste that color and so there's the blue, here's the blue, that's our brand but what I'm gonna do is I'm gonna hold Shift and click that color swatch and convert it between RGB and HSL and all that sort of good stuff because I want these color channels for free so that's what that task here is is grab that hex, go into a DevTool find the HSL color channels because we're going to be building up color using those channels specifically in HSL which HSL stands for Hue Saturation Lightness and it makes for a really great way to sort of build custom themes because of this syntax the way that you can talk about the color and compute on the color starts to make a lot of sense okay, let's get started then on adding some cool color to this let me grab, I wanna actually grab the custom properties out of there and again, you don't have to do that I'm gonna come back to the top and put them here with the rest of the custom properties and these are global custom properties, right we have spacing that's being shared everywhere and we have colors that are being shared everywhere but we did make one local custom property earlier, right which was the repeat we set it there in the form we could have like some like form repeat and sort of like made that look like it was stuck into a component but anyway, I like putting things at the root for global ones and if you can try to name your local custom properties to make sure that they just don't mix in with the global ones as you read them anyway, whatever I've put our three color channels here into the color space let's see how it's time time looks like it's getting towards the end I think so let's see so if I've got my color channels there and I popped down here and I'm just gonna paste the branch here so again, I'm just creating a custom property and setting those different channels we can see that I use the hue, right that I create right here is just 200 I divide a 100% into so this is gonna be 50% saturation and 50% lightness and so that's gonna give us a nice light desaturated brand color and that's what we're gonna use in the dark theme so anyway, we'll kind of build up from there I'm gonna grab these two so I like thinking about colors in text and surface so here's our two text colors and here's our four surface colors and if you look at them they're all based off of the hue here and then I'm just sort of setting absolute values I'm saying, hey, this is a kind of saturated and almost white kind of saturated and then definitely still on the light side so this is this third channel here is lightness and then on my surfaces I'm like, okay and they're still in the blue family they're still slightly saturated and they're very dark so as long as you have about 50% and 60% difference between your lightnesses here you can build accessible color schemes fairly confidently and I would definitely still say to measure but that's just a healthy tip to sort of keep lightness very stark between these colors and you'll make sure you have something that's accessible okay so I'm gonna grab this next media query here which checks for the user's preference so here's our first user preference media query this is prefers color scheme light and I'm just gonna update the route so if they do like a light theme I'm gonna update that brand color to be fully saturated so notice I'm not dividing it by two like I was previously we'll grab all of our text here's our text ones stick those next to brand grab the surface paste those surfaces in there so essentially we have light and dark custom properties ready to be used they're just not being used anywhere so let's go use them so the main one that I always like to use here is on the body we're gonna give the background of surface one and the text color of text one right so text one on surface one is an accessible color combination and we want to use them let's paste it I put that in the body selector there and we can start to see our page is coming to life because I prefer a dark color scheme and we built this to handle dark color schemes now they're starting to apply so here's our field set it's got a border and a background color where's our field set item here it is paste that there our field set item itself I said field set item before but this is our field set item excellent so notice that was a color on the whole surface there this color is for each item and there's our hairline our one pixel starts to show up there as the dividing color and here's our field set item picture field set item picture gets a color surface four now we've used all four of our surfaces we have this sort of one here around the icon we have one on the field set item itself one on the field set group and then one on the background so we have four surfaces two text colors we're just using them all cleverly to make this whole layout let's get the field set item SVG and the field set item focus within so here's a new selector and this one right down below it so if the field set item is getting focus inside of it we're going to change the color of the icon to be the brand color and you can see that right here did you see it go blue see it goes blue so when we have interaction happening next to this we get to change this color and that's focus within so we're saying hey if this field set item is getting interaction some focus we want to change the SVG child that's next to it and I just I love it you're going to see some other focus within work here here's our small we're going to set that to custom color here text to two and then for nice little kicker here on the route if you set the color scheme to dark light watch what happens to the checkboxes and inputs so here okay and so here we can see that we got custom colored checkboxes and SVG icons and just with one little CSS property called color scheme and you're signaling to the browser like it's okay for you to use those colors here and I'm getting very closed up on time so you can have to add these last styles yourself that reduce the motion our goal here is that we want to look to see if the user has a preference for reduced motion and if we do we're going to use color cross fades or opacity cross fades instead of some of the grow and shrink and scale animations that we would have done otherwise and that would get you to the end here where it would be otherwise complete and responsive and adapting to users from across the world and I hope you had a fun time this workshop and feel inspired to go make new interfaces alright see you later y'all bye