Responsive layout checklist

It seemed to be the standard to set the body element to be 960px and to make it centered on the page. In this case, we’ve set it to max-width: 500px so it’s small enough to see here.

That body centering is great… but – it does what it says and centers EVERYTHING. That’s too heavy-handed. By choosing what to do based on the various sections of the website – you’ll have more control.

Images were just fine when they were small and on big screens. But – that time is over. We need them to be more flexible! and if we don’t tell them to be… then no one else will.

The natural layout of the boxes isn’t ideal, so – you can set it to be better.

Links aren’t just little blue underlined bits of text anymore. They need to act like parent elements.

This little piece of magic is what made responsive design possible. It allows you to create sets of rules that only apply at certain viewport sizes. Here is a very simple example, but you can nest any CSS rules inside the @media query.

You could just use @media queries and bump up the size at various steps. This clamp() function is very new. Don’t go overboard with it, meaning: don’t put it on your body text. It’s really useful for when you need your headings or other text to change size with the browser – but that’s not all that often!

Flex-box is how we arrange/position MOST things now. We’ll go over the other ways, but this one is more useful overall – so, naturally – we teach it first!

We WILL talk a lot about the new CSS GRID layout system… but for now, here’s a snippet for making the core/basic ‘grid’ of items. Just copy and paste it!

We think that flexbox is a lot more important than these now, but you certainly should know about these too. We put them in order of importance.