Macro & micro layouts - Designing in the Browser

Key Takeaways

hello welcome to designing in the browser this series where we explore user interface design through the lens of modern web technologies in this season we're going to do a deep dive into the apis that prepare you for the new responsive web of tomorrow if you didn't catch the last episode on container queries definitely check that out because today we're going to be elaborating on some concepts introduced in that episode and expanding beyond how to use container queries into the question of when to use container queries versus another layout algorithm and how to combine them layout is a critical component of user interfaces and as the complexity of our interfaces grows so do the options we have for designing layouts for them design systems enable developers to think in terms of component-based architecture and separate page designs from component-based intrinsic designs until recently this has and largely is still pretty limited the way we're forced to style pages is still focused on a global first approach but with container queries developers and designers can finally truly divorce macro more global page level layouts from micro intrinsic layouts that are owned by the components themselves [Music] let's start big and then go small this is how i like to paint write styles and create ui designs from broad strokes to more detailed polish macro layout generally refers to page layout or application layout from a higher level point of view this would be how you break down your web page where the header goes the body the sidebar etc when it comes to designing for responsive screen sizes macro layouts shift and reorganize to best fit available space it wouldn't be a very comfortable mobile web experience if you were just browsing a zoomed out desktop version and vice versa on wider screens and narrow layout is difficult to parse especially if it's expanded to fill the wider area so items might stay or hide off screen to ensure that the primary content is always at the forefront and available to the user in a format that best fits the screen when there's more available space more sections might become visible to fill the space and areas might grow or shrink to fill that space macro layouts tend to work well with css grid because the css grid layout is a two-dimensional layout algorithm which enables developers to define both horizontal and vertical spaces it also lets you place content within those spaces this makes it ideal for creating layouts like the holy grail layout and other full page bird's eye view spreads this holy grail layout can be written in css grid using just a few lines of code what we're specifying here is i want to create a page layout on the page layout element i want to make the row template auto which means it takes a size of its children 1fr and auto this places the header and footer at the top and bottom of the page and the content within it takes up one fractional unit of the remaining space so if we're setting the height of the entire page to 100 vh that would let the remaining space of the page the 100 vh viewport height be that middle section then i want to make the columns take up 200 pixels that's the left and right sidebar and then the middle space the the center of it would be one fr unit which is the remaining inline size from there we can also place items in this grid like so and all together it looks like this if we let that center section stretch to fill the space and all of this quickly is adjustable in just a single line of code using the grid template shorthand for both the rows and columns and here's what that looks like all together so we have our full layout here i've set this grid on the body and the grid template is written here as auto 1fr auto i have my 100 vh if i don't have that you can see that it collapses so that's important to make this all fit into this viewport and i could of course adjust these so i could set this to 100 i could make that also a relative unit value instead of an absolute unit value there's a lot that you can do a css grid layout in just a few lines of code i think that's super cool and then you can see that i'm placing something like the header to span across three of those grid lines starting at the first one so i could places have it span just two of those lines but currently i'm just using intrinsic placement for the left side part the main section the right sidebar so it would have everything flow uh up a little bit i'll show you what that looks like it kind of breaks our layout but i could also be placing everything else explicitly i just wanted to do this so that it shows you that you could place some things explicitly and then some things will flow into the remaining available space at some point though this layout might feel pretty squeezed see as i'm doing this the main section is getting really squeezed so we might want to create a media query to adjust the grid or to span items across the grid in a different way for example we could hide the right or left sidebar in a pop-out menu and we can expand that main content section or we could just stack that content vertically at some point so if it was on a mobile or more narrow design we might want to stack it media queries are great for these types of page level adjustments so what that might look like is this we have the same layout but with this one we have a media query so it's getting squeezed and clearly this is like a demo because maine is way too squeezed there but then at 500 pixels we have this media query that's doing these adjustments where on body we're setting a new grid template so here we're setting auto instead of one fr for that single space we're setting three rows with repeat three one fr this is a grid function that we can use as a shorthand and then auto for the footer so what this looks like expanded is auto 1fr 1fr 1fr auto and some then we're setting the grid template columns to 1fr so if we're writing it in one line of code it looks like this there's a really handy little button in dev tools that i could trickle down to see what that looks like expanded so it is a shorthand for grid template rows and grid template columns with that slash in the middle and it rearranges to find our ui a lot better so we can use media queries for these macro layouts when we want to place items on the grid or just have it look a little bit neater there are also a lot of really neat functions in addition to repeat that come along with the css flexbox and grid specs that make automatic responsive layout without media queries possible one of those is the css grid min max function this is one neat way to create an intrinsic layout grid without the need to use media queries these children have a base minimum value of 150 pixels with a maximum value of one fr fractional unit meaning on smaller screens they'll reach the full 1fr width and as they reach 150 pixels wide each they will start to flow back up onto the same line and here is what that looks like we have a new section on the web.dev site called layout patterns that pulls all of these different patterns together and this one is just exactly what i described with the repeat auto min max where you have these fitting onto the same line and so you see that this is going to fill that area as best it could but it creates this like automatic repositioning of this grid as it tries to fit into that area so there is some automatic intrinsic design that can be done within something like the script layout this layout can be considered both a macro layout and a micro layout since it can live inside of a parent layout but it can also contain its own children with their own layouts i also frequently use the min max and clamp functions to give elements flexibility in their sizing while maintaining boundaries like a minimum and maximum size i also have a demo of this clamping card here where it's doing exactly that so we have this width that has a minimum size of 23 characters a maximum size of 46 characters so the text within it's still legible and an actual size of 60 so we're always going to try to be 60 of this width here and as i resize you can see it's increasing in size up to a point it stops increasing in size it's hit its max and then when i decrease it in size it decreases to a point when it hits its minimum it stops doing that so we use this all over the design symbol website to give things parameters while they can still be flexible in between this gives me that intermediary control setting parameters of what is the allowable display area and giving it room to be fluid in between now let's get into the smaller components that make up our web pages micro layouts are smaller component level layouts that live within macro layouts micro layouts work particularly well in component based architectures where elements already contain and own their application logic with container queries you can now co-locate those component-based styles with that logic within the individual component like macro layouts micro layouts can adjust based on their available space you can do this either with some of those responsive intrinsic capabilities of flexbox and grid or with container queries responsive graphics or media can be an example of a micro layout that lives inside of a given media space on the page cards that contain sets of information could also have their own micro layouts within a larger grid and act independently of that grid layout typographic layouts can also be nice micro layout moments throughout a ui and even something as encapsulated and small as a call to action button can have its own micro layouts with container queries so let's take a look at what that looks like if you saw the last episode you probably recall this add to cart button and i just want to show you how cool it can be to give this its own intrinsic design in its own micro layout so this add to cart button has a container and i am giving that cart button container this container in line size so that cart button can then query that container so here as i resize this you can see that it's readjusting its styles it has this plus sign with the card and add to cart then the plus sign goes away then the two cart goes away just says add and then this is going to continue to shrink the detail on this cart is going to go away because it's getting too small and then finally i have just the cart so this is a great way to showcase how any small part of your ui can have its own micro layout and i can put this card within another container so again just to show you here is a product card this one is a planter i have this add to cart button within that planter container and then as i resize this that add to cart button knows that it has its own responsive style its own micro layouts that lives within this intermediary layout which is acting like a micro layout in this case of this card and then there we go at this wider width even though the card switched layout to its smaller layout width the button itself is at its wide width so it's super cool to see how all of the stacks it's super modular and to see how we can make really customized ui's using a mix of all these responsive mechanisms that the web gives us so let's break down how i did that first i planned out the different views i wanted at each breakpoint size for the card content so it goes from just the cart without line detail then i add the line detail then the little plus sign and then i have the text say add and then the full add to cart when i layered it this is what it looks like except instead of the svg text i'm using dom text for the actual button as i showed in the demo each of those numbers corresponds to a query step with one being the smallest size and five being the full size i also add space between the cart icon and the text as the text appears so again within the ui it looks like this it's expanding it's filling the space it's appearing at all of these different steps and stages and it's doing all of this through container queries it's super super cool to see that to see it shift to see the cart icon rearrange to make the plus appear disappear the possibilities really are endless so here is an example of typographic micro layouts so in this example i have this calendar component which is the grid and then inside of this calendar i have these days which are columns and then within now we have the date so where we're setting the day which is the the day number and the day of the week so thursday the 12th friday the 13th these are actually shifting based on their given available space from this inline layout next to each other to this block layout where one is on top of the other and the size of them changes so we're doing here is within the calendar we have this day and then that itself is a container so that container is being queried by both date and within events these items are also querying it so let's just look at date because this is one example of a typographic micro layouts so here it's going to be shifting it's getting that display block at this max width and then here you're going to go back to display flex so that it's going to be one to one next to each other also adjusting the size a little bit of height variation but that is just one example that when we go even smaller it's going to go back to that wide view so another thing to look at is these individual events within this demo so here the font sizes of them are actually going to start shifting so here you can see that they are a little bit bigger and then at a specific point they will adjust to be just a tiny bit smaller and that is just one example of another small adjustment that can be made here they've grown here they're just a little bit smaller another example of a typographic micro layout adjustment so things are just fitting a little bit better into this ui just like they do with the dates with the day of the week and the date number when you combine responsive macro and micro layouts you can control the larger view as well as the smaller views and you get a really flexible and fluid design that looks great at any screen size and parameter combining media queries for macro layouts intrinsically responsive grid and flexbox capabilities for the intermediary layouts and container queries for micro layouts brings you a ton of control yet flexibility to your interfaces and for more of these patterns we've recently launched web.dev patterns which is a collection of off-the-shelf ui patterns you can use in your web projects to help you quickly get started with building the base of your ui we've added both macro and micro layout patterns everything from large full page spreads and card sets to smaller layouts that can live within those larger layouts such as the cards themselves definitely check those patterns out for more i also included a container query card pattern as a demo as well as some of the other macro and mid-tier layouts i mentioned today most of these layouts were cross-browser because they utilize css grid and flexbox it's a lot of fun to play with these patterns and especially layer them i love the modular aspect of containers and it's just so rewarding to see it all come together i hope you get a chance to check the pattern templates out and as always i'll see you on the internet until next time [Music]