Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Intrinsic Web Design
1.7k Plays1 year ago
Intrinsic Web Design, or Intrinsic Layouts, is a way we can approach writing our CS where we’re handing off a lot of the control the browser. That doesn’t mean we’re letting go of all the control though, but instead that we’re giving the browser hints on what we’d like to happen and letting it do the hard work for us.
What I’ve been up to this week:
- How to make your own frontend roadmap
- Create a progressively-enhanced infinite horizontal scroll animation
- The border-radius feature most people don’t know about
- CSS Mastery with Kevin Powell: Unveiling Uncommon Knowledge (The Code Ryan Podcast)
Other awesome stuff around the web:
- Contextual Spacing For Intrinsic Web Design by Stephanie Eckles
- Styling the Intrisic Web with Cascade Layers & Container Queries by Miriam Suzanne
Find me elsewhere on the web:
Recommended
Transcript
Introduction to Intrinsic Design
00:00:00
Speaker
Hello my friend and friends, and welcome to my podcast, General Musings. My name is Kevin, and this podcast is an audio version of my weekly Sunday newsletter. And this week, I'm going to be talking about something that I hinted at last week when I was talking about the CSS mindset, where we're going to be going into the world of intrinsic web design and intrinsic layouts. Before we dive into it, I just want to apologize because I am fighting a little bit of a cold right now, so I might sound a little bit different or a little bit stuffy, but we should be good to go for a short podcast like this one.
00:00:29
Speaker
Last week when I was talking about the CSS mindset, I was talking about how changing the way we approach writing CSS can really help us out a lot by, you know, when we realize the way CSS sort of works and we can work along with it and we end up writing a lot less CSS and having a lot less frustrations along the way as well.
00:00:47
Speaker
And then as we lean more into that idea, we start finding ourselves more in the world of intrinsic design.
From Responsive to Intrinsic
00:00:53
Speaker
And this whole idea of intrinsic design or intrinsic layouts, which is a term that was coined by Jen Simmons, is when we're sort of handing off a lot of the control to the browser.
00:01:03
Speaker
Jens saw it as sort of the next stage that comes in after the idea of responsive design. As much as we were making things responsive to all the devices, we were doing it in a very structured way, right? Where we had to tell the browser everything that was happening and we were relying a lot on media queries to make all of it happen.
00:01:22
Speaker
Going quickly to the idea of media queries, we often hear about things like mobile-first or desktop-first, and there are some people who argue which one is the right way to do. Usually, I think the consensus is that mobile-first is the more popular approach to take in general. Lately, for myself, instead of looking at it as mobile-first or desktop-first, the way I've been leaning into things is more the path of least resistance.
00:01:45
Speaker
And my idea behind this is instead of worrying about which media query I'm going to use just based on that's the way we do it, I'm going to look at the way that I can write my code that involves me writing the least amount of code possible and having to overwrite the least amount of styles possible.
00:02:00
Speaker
I want to focus more on writing less code, which generally means we can have more maintainable code, instead of worrying about whether I'm using a min or max media query. And for a lot of things, Mobile First does make sense because on mobile layouts everything just stacks on top of each other and follows the normal flow anyway, so I do think that's why Mobile First has gained as much traction as
Effortless Coding and Navigation
00:02:21
Speaker
it has.
00:02:21
Speaker
When we take that approach, we're doing just sort of the least amount of code possible, relying on just that normal stacking behavior that's already there. And then we add complexity at larger screen sizes by using media queries to say at this specific screen size, let's change the layout to look like this instead. For some things though, like say a navigation, sometimes the mobile version of it is actually the more complex version, right? It involves more styling, there's more moving parts, we have to worry more about the interactions and other things that are going on.
00:02:49
Speaker
Whereas the desktop version of it, we just throw a display flex, add a gap to it, and the navigation works. So that's why in those cases, I'd rather take the path of least resistance and actually use a max width media query. By doing that, I'm putting all these very specific bits of code where I have quite a bit of styling going on and all of that extra like interactivity and what happens when it's open, what happens when it's closed. All of that is reserved for mobile purposes only.
00:03:14
Speaker
And then I don't have to overwrite all of that in my regular CSS. I don't need another media query coming in for the larger screen sizes that's undoing all of that work that I've done. And for a lot of those styles that I would be applying or declaring, I'd just be resetting a lot of them back to what the initial values were in the first place, which is really annoying. So by putting them in a max with media query, then I don't really have to worry about them anymore.
Simplifying Layouts with Intrinsic Design
00:03:37
Speaker
Now the idea of intrinsic design here is a little bit different because it's much less reliant on media queries as I sort of alluded to earlier on, but the goal tends to be the same which is taking the path of least resistance. And the nice thing with intrinsic layouts is there's a very easy way to start leaning into little things that can really help you out in the long run.
00:03:57
Speaker
going back to this idea of the navigation, do you really need that complex version of your navigation? Do we need it to be hidden off screen with a hamburger menu that the user has to interact with that then slides out and it has its own styling going on and all of that? Or could I just take that nice display flex, put a gap on it, and then add just a flex wrap of wrap?
00:04:18
Speaker
So as the screen gets smaller, if those navigation links run out of room, they just wrap down onto a new line. By doing it that way, we've managed to make the navigation work at all screen sizes with one extra line of CSS and it just works. We don't need any media queries or anything like that.
00:04:34
Speaker
And the cool thing with this is it doesn't matter when it starts to wrap. When we're using media queries, we have to figure out what breakpoints we're going to use. And that's something people are always asking me, what breakpoint should I use for this thing that I'm creating? And it really depends, right? But if we don't have to worry about breakpoints, isn't that really nice? In this case, it will start to break when it needs to break. It doesn't matter if the user has a different default font size, or if the user zoomed in or out on the site, it's just going to wrap when it needs to wrap. And I don't have to worry about when that's actually happening.
00:05:03
Speaker
And I actually use this on my personal site for my own navigation there and it works perfectly fine for the nice simple navigation that I have there. And I realize this isn't going to work for the complex ones. You have an e-commerce place that has drop-down menus and sub-menus and all of that. That's going to be complicated no matter what. But if you have a simple navigation, doing something like that might just be exactly what you need.
00:05:24
Speaker
The other simple layout that I always advocate for, for when it comes to intrinsic design is using grid and using the auto fit with it. It can be a little bit weird at first, the first one or two times you use it, maybe even 10 times you use it, just cause it is like a really long amount of declaration you have to do for a single property. Like the value is long for it with the repeat and then the auto fit and then a min max. And it looks kind of strange, but it works so well. I mean, basically all we're doing is saying to the browser,
00:05:53
Speaker
This is the smallest I'd like my columns to get. I don't really know much more than that. I want to prevent them from getting smaller than this. Can you do that for me? And it's going to go, sure. I'll fit as many columns as I can in there, but I'll make sure they never get smaller than that. And if there's not enough room, there'll be less columns. And if there's more room, there'll be more columns.
00:06:11
Speaker
I don't have to worry about when those columns are coming and going. I know that they're falling into the constraints that I've given it and I can play around and make sure that minWith actually makes sense on it. And in general, every time I've ever used this, it just works wonderfully well. I don't need any media queries, the layout just functions
00:06:27
Speaker
really nicely and it's really similar to that flex rack but just more with a structured grid and it works fabulously well.
Recommended Resources for Designers
00:06:34
Speaker
Now of course the idea of intrinsic layouts can also be a lot more complex than this. There's a website called Every Layout which is by Hayden Pickering and Andy Bell that dives into several I think there's 10 or 12 different layouts in there that are common patterns that we see but relying more on intrinsic designs where the layouts are shifting and changing not based on a media query but instead based on
00:06:57
Speaker
the hints that we've given within the code itself. So my main shouldn't be less than 50% of the width or this sidebar should maintain this size. And when the browser can't handle that, the layout just switches on its own and it stacks the content and everything works fine. And it's a really awesome resource. If you haven't checked it out, it will be one of my links that I include in the description. It is a paid product. I'll just let you know.
00:07:21
Speaker
This isn't like an ad placement or anything. It is something that I really do think is awesome. And there are a few of the layouts in there are free. So even if you don't end up purchasing it, I would recommend checking those out just so you can sort of see a little bit of how they've managed to do things in I think a very creative way. Sometimes it's pushing sometimes Flexbox to its limits on how it works, but it ends up creating these really robust and really awesome solutions.
00:07:45
Speaker
And to me, that's the goal of writing good CSS is creating robust solutions that just work and we can place our content in there and we know that it's going to work and we don't have to stress about it after that. And then I'm not worried about this breakpoint or that breakpoint or when things are going to change. And do I need to make an adjustment here or a change over there?
00:08:03
Speaker
You know, I'm making it sound like it's super easy to get there. It can be quite a bit of work, especially if you have more complex layouts. But I think it's something that is worth learning more about and trying to embrace as much as possible. We want to give the browser as much information as we can, but then let it figure out the hard parts for us so we don't have to because then
00:08:23
Speaker
it's going to make sure the layout's working no matter what happens, no matter what the user zooms to or what their font sizes are, whatever gets thrown at it. Because as I said last week, we don't know all of those things. The user has so much control on what's going on. So if we do take something and can figure out a nice, resilient way to make it, then it's better for everybody.
00:08:43
Speaker
And the best thing of all is we keep getting new features added to CSS that help us out with this, right? We have container query units now, which are absolutely awesome. We have clamp, we have logical properties, and there's a whole bunch more as well. And speaking of intrinsic design, my other awesome stuff from around the web section this week is going to highlight two different links that are about intrinsic design for those who want to dive deeper into it, with the first one being contextual spacing for intrinsic web design by Stephanie Eccles.
00:09:11
Speaker
on her blog, Modern CSS. And it's a really nice look at using a whole bunch of the new CSS features like Clamp, Min, and Max to use those for simpler approaches to spacing. It looks at how we can use things like fit content, which is an intrinsic property of its own for setting widths and where that can be useful. It dives into some layout examples of some things that we can build and a whole lot more. It's a really great article with lots of examples. So I'd really recommend checking it out if you're interested in this idea.
00:09:40
Speaker
And the second one is a talk by Miriam Susan called Styling the Intrinsic Web with Cascade Layers and Container Queries and it's a talk that actually the link I'll put has two versions of the same talk that she's given on this topic and it's where she explores new features as cascade layers and container queries most notably
00:10:00
Speaker
and how we can use those to help us with this idea of writing stuff for the intrinsic web design and getting the browser to help us out as much as possible. It's a really good talk. It goes over a lot of different scenarios. It is a little bit older, so these features weren't at all supported when she talked about them. I think they were behind a flag in Chrome at the time, and there are some differences now that we have container queries and now that scope is getting closer.
00:10:26
Speaker
to how they were working then and now, but the ideas behind them are all exactly the same. So if you have a bit of time to set aside and you want to listen to an interesting talk, I would definitely recommend that you check that one out. And speaking of links that you might want to check out, we're down into what I've been up to this week, a section, and this will move us a little bit away from intrinsic design because I haven't really done much there.
New Tutorials and Appearances
00:10:47
Speaker
this week but the first video that I did put out on Tuesday was looking at how we can make our own front-end roadmap because I get lots of people asking me for this. I've done a podcast episode on this not too long ago and I thought I'd expand on that idea a little bit and turn it into a video where I just talk about how you can figure out the best way to learn and the next steps that you need to be learning without relying on something telling you which way to go and how even
00:11:10
Speaker
When you have a step-by-step guide, sometimes that's a little bit misleading because sometimes you need to go backwards or sometimes you're learning four things at once and you know, all those, those struggles that come up. The next one was how to create a progressively enhanced infinite horizontal scrolling animation, which is basically, you know, those infinite scrolling animations that slowly go by. Often these days we see them with logos where the logo just scrolls by. It's sort of like a carousel, but where you don't have any control over it and you're just turn out like highlight a few things or something. And it gives a little bit of motion to the website.
00:11:40
Speaker
But that's a problem right there in its own is horizontal motions like that can actually be problematic for people who have vestibular issues, especially if you're scrolling up and down and then there's also sideways motion. I'm not even really a big fan of sideways motion. So I wanted to look at how we can make it progressively enhanced. And we also need duplicate content when we do this. So I figured we're going to start off with something that just has the content there. Anybody can see it. It's going to work fine.
00:12:04
Speaker
then it prefers reduced motion, reduced is enabled on your system, then it just stays like that. But if you haven't opted in for reduced motion, then we use JavaScript to duplicate the content, add in our area hidden so a screen reader wouldn't get the duplicated content, and then how we can add the animations after that. And I look at how we can even add controls to it for the speed and for the different directions that we might want. It was a really fun video to put together actually. So yeah, that was a good one if you want to check that one out.
00:12:33
Speaker
if you prefer really short videos. I did have a 20-something second long short this week where I looked at how you can put on one corner of an element different border radiuses. It's like the horizontal and the vertical border radius can actually be different from one another and a lot of people don't realize you can accept two values for each corner on an element. So yeah, that was a nice really short one that looked at that.
00:12:54
Speaker
And another thing, if you're into podcasts, as you might be, if you're listening to this is I was on the Code Ryan podcast this week where I talked about a whole bunch of stuff from my journey into CSS, overlook CSS features. I talked about my thoughts on Tailwind, CSS and JS, CSS best practices, and a whole bunch more. It was a lot of fun to be on that podcast. It was really enjoyable. So if you're up to listening to something like that, you can definitely check that one out.
00:13:19
Speaker
And that is it for this week. If you'd prefer a written version instead of listening to me go on like this, the link to my newsletter is down in the description, as well as links to all my socials and links to every single thing I've mentioned along the way here. Thank you so much for listening, and until next time, don't forget to make your corner of the internet just a little bit more awesome.