Responsive layout checklist
Introduction
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.
“Setup?”
Under construction
We’re moving this page over !
Take some time
You play with the included CodePen embeds. But don’t forget that you can click “Edit on CodePen” in the upper right-hand corner. 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.
Display type visualization
Try it out. Do these make sense? Can you describe which elements are which and why?
You can also resize the frame.
One way to center the body element
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
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.
Centering content in each section
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
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.
Squishy images
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
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.