You’ve got your CSS reset…
BUT – you also need to get these things set up in order to make layout easier on yourself.
What should we call it? It’s not really a “reset” – we are setting up.
HEADS UP - this page is moving
It’s currently a “page” – but we want it to officially be a “resource”
So! It’s moving here: /resources/responsive-layout-checklist
You can’t just “look” at these CodePen embeds. You have to actually click “Edit on CodePen” to open them up and have room to see everything and to change the browser size – and all that jazz. Really dig into these – one at a time – until you understand them deeply. We can test you and give you mini challenges.
Some elements are display: block and some are display: inline
You absolutely have to know the differences — at the very start!
They each have their own set of unique properties that aren’t interchangeable. For example, you can’t put a margin on an inline element. Many developers rush and skip this. Then they promptly decide to hate CSS for life / and well, it’s silly.
(another version with borders)
More HTML cheatsheet stuff
Maybe this one – where you can interactively highlight the elements will do the trick! Which one works for you?
One way to center the body element
It seemed to be the standard to set the body element to be 960px and to make it centered on the page.
Centering content in each section
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.
If this isn’t making sense, you can watch the Scrimba that Derek made about it – which goes into detail.
The natural layout of the boxes isn’t ideal, so – you can set it to be better.
“Breakpoints” with the @media rule
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!
A (tiny) intro to flexbox layout
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!
Grids of items
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.
Does this stuff make sense?
If you aren’t a student, then you wouldn’t have the background of the first 6 weeks of the course! These might feel out of context. We’ve tried to put them in order of importance! What do you think?
Want to talk about it?