Prep HTML for Styling with Flat Class Names

Keep Styles Portable and Maintainable with Basic Classes

Reduce Ambiguity in Class Names using a Naming Convention

Style a Form with Plain CSS

Understand Semantic Markup in relation to CSS

Use CSS to Inform Users of Interactivity

Draw Simple Icons with CSS

Use Media Queries to Make an Existing Application Responsive

Inform the User of Interactions with CSS Transitions

Style an Application from Start to Finish

If you have an existing desktop-friendly application you can make it mobile-friendly as well using responsive design and media queries.

[00:00] This app is looking good on the desktop screen, but to be honest the layout is not ideal for mobile. I think it would feel a bit more natural for the list to be oriented from the top of the screen. Adjusting the width of the window we can see that at 730 pixels it looks a little bit cramped, which makes sense since that's the max width of the container.

[00:17] Let's add a media query to change properties at that width. There are a few options for media query strategies. I recommend mobile first, meaning the base styles before the media query comes into play should be mobile friendly. I'm using max-width here to change the properties at 730 pixels.

[00:33] Right now our base styles are desktop-friendly, or larger screen friendly, so I'll have to move some of those down into the media query to override the base styles which will now be more mobile friendly. We don't want the container to go right to the edge at 730 pixels, so we'll bring in the max-width just a bit on this larger size.

[00:52] This is already a property on the container outside of the media query, but we're going to change it up there, so we have to override it here if we want to keep it looking the same when we get on the larger screen.

[01:03] If we change this to justify the content to the flex-start, that will change the order of everything, get it just the way we want it. We move this little slider and go to the larger width, we'll see it switches back to the flex-end.

[01:15] We're going to reverse the order on this, so that the list will come last vertically, so let's move the rounded corners to the bottom instead of the top. We won't really see this change until the order of the filter list is changed, so we're just going to go on faith that this is working.

[01:27] We're going to use the old rule in the larger screen size, so let's just cut and paste it there. Let's start changing the order. It looks like the new todo form is part of the todo list, but it isn't, and it's only appearing under the list because the order is set to -1 on the list itself.

If we take out order: [01:45] 1, it will go back to the default which is 0so the list will go back to its natural position under the new form. Then we need to go add this order:-1 down to the media query, and that will get it to go in the right position when we're back on the larger screen size.

[02:07] We also want to change the direction of the todo list items. Right now the newest items appear on the bottom, which isn't how we want it on the smaller screen. Let's define the larger screen direction in the media query, so we can override the update we're about to go do up above.

[02:22] The flex-direction needs to be column down here, and then up above we'll go ahead and set the flex-direction to column-reverse, getting it to go the other direction. As we adjust the width we can see the new todo form and todo items are switching order nicely, but the border separating the items is all messed up.

[02:38] Let's duplicate the box-shadow that's making those separators, and we'll switch the direction on them, we'll also have to adjust the colors. Then we'll actually cut and paste the old property down into the media query to get it to work the way expect it on the larger size.

[03:01] Let's copy that selector as well, because I don't want to retype it. The last thing we need to do is move the filters to the top. Before we move it, we should also update the border-radius, so the bottom corners are rounded and not the top ones.

[03:27] We'll set the order to -1 to get it to the top, and then we need to go down into the media query and fix the border radius again, and also set the order to 0to get it back where we want it.

[03:39] As I move this slider back and forth, and change the width, you can see it switching between the larger and the smaller screens nicely. We can see that we did some pretty simple changes here, and to be honest, flex-box did a lot of the heavy lifting.

[03:52] It gave us the option to be able to change the order for things appearing in the DOM, which is a little bit trickier to do before flex-box was an option for us. But I think this example shows how complicated responsive design can be.

[04:04] There are some strategies to make it a little bit easier, but for the most part a lot of responsive design, or retrofitting an existing application to be responsive is a lot of manual work moving things between media queries.

Course

Style an Application from Start to Finish

Use Media Queries to Make an Existing Application Responsive

Share this video with your friends