CSS Basics Part 1: Box Model, Display Properties, Positioning, Viewport, Units, Calculating, Flexbox
This is a presentation I made at KRY and I love to share valuable information for free. That is how I learned and this is my way of giving back.
Shout out to Keving Powell / kepowob for creating some of the examples I've shown today.
Shout out to WesBos for providing one of the best free courses on Flexbox as well: https://flexbox.io/
What we will see today
The Box Model
Basic Display Properties: Inline, Block & Inline-Block
Positioning
boxModel widths and issues
The viewport
Calculating in CSS
Units
Flexbox
Our goal today: Reduce Frustration
The box Model
Codepen: https://codepen.io/pedroferrari/pen/v...
---------
How Elements are Divided
Docs: https://developer.mozilla.org/en-US/d...
---------
Positioning Elements in the DOM
Codepen: https://codepen.io/pedroferrari/pen/J...
---------
The ViewPort
Codepen: https://codepen.io/pedroferrari/pen/M...
---------
Key takeaways:
100% vs 100vw.
The ViewPort is unreliable for layouting.
Do NOT use large fixed width elements.
Do NOT let the content rely on a particular viewport width to render well
Calculating in CSS
calc(operation) = returns the result of the operation
min(x, y) = returns the smallest value
max(x, y) = returns the largest value
clamp(min, preferred, max) = Clamps value within a range
font-size: clamp(min(10vw, 20rem), calc(300px - 3em), max(90vw, 55rem));
---------
Calculating in CSS: Clamp
Codepen: https://codepen.io/pedroferrari/pen/x...
---------
CSS Units
Codepen: https://codepen.io/dinbror/pen/DWBYyV
---------
Flexbox Navigation Example P1.
Codepen: https://codepen.io/pedroferrari/pen/W...
---------
Flexbox Alignment and Justification
Codepen: https://codepen.io/pedroferrari/pen/W...
Specification: https://www.w3.org/TR/css-align-3/
---------
align-items vs align-content
Codepen: https://codepen.io/pedroferrari/pen/m...
---------
Flexbox cards
Codepen: https://codepen.io/pedroferrari/pen/q...