What we’re learning here is the industry
standard way to build for the web. And almost everything ON the modern web is
built using the box model. And that’s to say that all elements (whether
they’re headings or paragraphs or sections or phosphorus) — all elements have boundaries
that can be represented as boxes. And the REASON this is so important is because
the box model allows us to design very responsively (these things can move) ...they can reflow
depending on what screen size someone’s using. We’ll talk about automatic sizing, then
we’ll cover TONS of different units (like pixels, percentages, EMs, REMs, CH, VH, VW...),
we’ll cover size using minimum and maximum dimensions, we’ll do OVERFLOW (tons of control
here), and finally, we’ll cover object fit (this lets us size something like an image
to fit INSIDE of another element). Let’s start with auto (automatic sizing). Because by default, things on the web are
sized by the content inside of them. For instance, this heading? We haven’t set a width, nor have we set
a height. But the SIZE of the heading is controlled
by the Typography properties we have. As we change those, notice how the size of
the BOUNDARY (the bounding box) is changing. (The text isn’t JUST getting bigger; it’s
pushing other stuff on the page around, too.) Same thing with this Section. In fact, if we look at our hierarchy here
in the Navigator, we can see that the Heading, the Paragraph, the Button — it’s all inside
a Section. And that SECTION? It’s also being automatically sized. So the main point here is that elements on
the web are automatically sized based on what’s INSIDE them. And that includes padding, by the way — if
we increase the space INSIDE our Section? Notice how the section is getting taller. (THAT affects the size.) But that’s automatic sizing. What about size UNITS? (What if we want to define our OWN sizing?) In this section, we’ll cover pixels, percentages,
EMs and REMs, viewport-based units, fractional units, character widths, and of course, centiliters. Starting with the one on top. Pixels are the default for a lot of dimensions. If we have an image? 300 pixels wide? Hit Return? That’s 300 pixels wide. Now. A couple things to note: we just modified
this on the CLASS (we used the Style panel here to make this change). Why is that important? It’s not. Except it ABSOLUTELY is. If you have an inline image? (Something you drag in from our Assets?) When you drag in an image, here’s the thing
to remember: if you scale it on the image itself here (if we directly set a width or
use the corner to click and drag), you’re setting the size on the ELEMENT (NOT the class). And here’s why it’s something to consider:
if we did it that way, and we want to go over to Tablet (if we’re moving down to edit
for smaller devices)? Let’s say we want to resize it to a different
WIDTH. When we do that, it looks okay, but if we
go back to Desktop, it made that change there, too. That’s why we usually recommend using CLASSES. When we size an element using classes, we
can REUSE that class anywhere else. And that means if we have a bunch of objects
(a bunch of elements) with the same class APPLIED, we can quickly change sizing on any
ONE of them, and everything updates. And we can even make changes in different
breakpoints. (We can adjust on Tablet, and those changes
will cascade down to SMALLER devices, but they won’t affect our Desktop breakpoint.) If you haven’t explored classes yet, they’re
magical and save, on average...time. But because different devices (each of these
have different pixel densities)...because pixels don’t always measure out the same
way, it helps to use canvas resizing. We can click and drag on the edge of the canvas
to approximate what things will look like on DIFFERENT devices (different browser widths). We can even go into Preview mode, and when
we’re there, grabbing and resizing lets us go through ALL the available breakpoints
seamlessly. But let’s try something else here. What if we have stuff INSIDE another element? Well this is just a Div block (the Div block
is selected)...what happens if we set a width on THAT? Notice now, when we hit return, or even as
we click and drag (we’re holding down Option here on macOS or Alt on Windows) — notice
how the stuff INSIDE the Div block is automatically reflowing. That’s because all that stuff is automatically
sized. The PROBLEM with setting too many explicit
widths like pixels (for instance, we’ll set the paragraph here to a pixel value)...the
PROBLEM is this: now it’s possible for things to awkwardly intersect or overflow. And that’s an important note. We’ll cover more of this as we go on, but
another quick thing about pixels (let’s look at an image for this example): you can
USE pixels in conjunction with other units...and for something like this image, the height
is automatic. And that means you don’t usually have to
define an explicit width AND height if your design doesn’t call for it. But if that’s pixels, what about percentages? Same card here. But instead of setting it in pixels, let’s
set it to 25%. And that means the card is now sized to take
up 25% of the width (the space INSIDE its parent element). Remember: we have some padding added on the
section, so this means it’s 25% of the space that’s left inside. But here’s why percentages (and a lot of
these non-pixel units) are known as RELATIVE units. As we grab and preview different device widths
on our canvas? Our SECTION (and the space available inside)
is RESIZING, and because of that, the card’s resizing, too (it’s always taking up 25%
of the available space inside the section). If we set it to 35% width? That’s 35%. What if we want to multiply that number by
1.4? Just multiply, Return, it does the math for
us. Like a calculator, but without the attitude. THAT’S percentages. What about EMs and REMs? Ems are based on font size. So if you have a Div block here (just a rectangle)
and its font size is set to 16 pixels? 1 em is equal to 16 pixels. So if we set this to 20 ems (we’re just
entering 20-e-m and hitting Return)? That’s now equal to 320 pixels. But here’s the fun part. If we CHANGE the font size? Notice how the size of this element is adapting
to match that change. (This is ANOTHER relative unit — this time
the size we’re setting is RELATIVE to the font size.) Ems are also really practical when we want
to set proportional padding on an element with text. Let’s look at that. Here’s a button, and we have it set to 16
pixels of padding on the left and right. But when we scale up the font size dramatically? Notice how the padding still stays at 16 pixels. (That space — that BREATHING room inside
doesn’t scale WITH the font size.) But what if we go in and set the padding using
ems? Since the font size is 16 pixels, let’s
just set it to 1 em on both sides. When we do? Changing the font size means the padding scales
ALONG with that change. (1 em is ALWAYS equal to the font size that’s
SET on...or being INHERITED by the element.) So how is that different from rems? Well, ems can get complicated. Because if we have something set to ems and
something inside that set to ems, too, we’re now having to use quantum field theory to
multiply all these different values together. (That can get messy.) So what REMS do is bypass ALL of that — and
they look STRAIGHT to the ROOT (that’s the R in rems: ROOT ems). In other words, they look to the HTML tag,
which, unless you go in and modify that, it means rems will respect the browser’s default
font size. (Rems IGNORE font stuff that’s set on the
element, or the element’s parent, and they’ll scale based on whatever the user’s font
size is on their browser.) Again...ems are based on the font size of
the selected element, and REMS SKIP all of that, and go straight to the root (straight
to the user’s default font size...which, unless someone changes it, is usually 16 pixels). So what about viewport units? There are four here — we’ll start with
VW and VH. VW sizes something based on the viewport width. 100 VW? That’s 100% of the width of the viewport. 50 VW? That’s 50% of the width of the viewport. And it’s the same with VH. But of course with VH, we’re affecting height. And this is an important distinction when
we’re comparing something like percentages and viewport values. Remember: a percentage set on something like
the width of an image? It’s based on whatever parent element it’s
inside (so if that parent element is set to 800 pixels wide, the image will now be 400
pixels). Viewport units don’t even care about the
parent elements; so even if they’re in the same, 800-pixel-wide parent element, all they
care about is the width or height of the viewport...and they’re sizing things relative to THAT. The more ADVANCED viewport options are vmin
and vmax. With vmin, we’re basing things off whichever
viewport dimension is smaller (that’s why it’s vmin) — and vmax? That bases things off the larger dimensions. So if we set this width to 50 vmin? It’s 50% of the smaller viewport dimension. 50vmax? It’s 50% of the larger viewport dimension. But those are our values based on the VIEWPORT. Next up is FR (fractional units). And these require vector calculus. Except they don’t. Because the math is done for you. FRs work inside anything that’s set to Grid. If we have four columns in a grid? By default, they’re each set to 1fr. That means with 4 columns? 1 fr is equal to 1/4th. If we add a column? Each fr is equal to 1/5th. And the magic part here is that you can CHANGE
these values (let’s set the first column to TWO — 2fr). And what fractional units do here...is they
AUTOMATICALLY scale things (the numerator and the denominator and ALL the math in between
— it’s automatically calculated). And it even takes into account column gaps
(the space in BETWEEN the columns)...so everything else automatically calculates. There’s plenty of stuff on using FR units
(and harnessing the SUPERPOWERS that the come with CSS grid)...and that’s over on Webflow
University — so if you haven’t explored that yet, or you’re new to using grid, definitely
check that out. But finally (the final one we’re covering
in this section)...is CH. Character units. What is this? Well, nobody knows exactly how it works. And here’s exactly how it works: character
units let us set the width of something based on the CHARACTER width. (We’re talking typography.) If we have a paragraph and we want to set
it to a width of 10 ch? Hit return? It’s now...something. But here’s what’s happening: the width
is being calculated as 10 times...the width of the number 0...in whatever font is being
used. Put more clearly? If it’s Arial? 10 ch? That’s 10 zeroes wide. But what if we change the font? 10 ch will always equal 10 zeroes of whatever
that typeface is. This is great for setting legible limits — maybe
we want something practical like 50 ch. Or 70 ch. (It bases everything on the width of a typeface’s
zero character.) But that’s ch. We’ll recap all of these size units at the
end of this lesson, but for now, let’s move on to minimums and maximums. Let’s say we set the width on something
to be 50%. As we know, that’ll mean its width takes
up 50% of the space inside its parent element (the section). As we resize the viewport? It scales accordingly. BUT, what if we want to limit this? If we want to set a minimum (maybe we never
want this narrower than 200 pixels wide) — and maybe even a maximum (maybe this image only
looks good up to 500 pixels wide). We can SET both of those, and now it’ll
BE 50% wide, BUT it’ll never get narrower than 200 pixels (that’s our minimum width). And as we expand? It’ll never get WIDER than 500 pixels. Now. Here’s a practical example with sections. A common design pattern is to set up a full-height
section. And a lot of people might set the HEIGHT of
the section to 100vh. There’s no PROBLEM with this, but check
out what happens if the browser gets shorter. Now things are either overflowing or clipping
off at the bottom (doesn’t look too great). So one trick using MINIMUMS is to remove any
explicit height from a section, and instead set the MINIMUM height to 100vh. Now it’ll never get shorter than 100% of
the viewport height, but it’ll also respect any of the content inside (so it can technically
be TALLER than 100vh...if it needs to be). This is even more obvious with pixels (this
happens all the time). Height to 800 pixels? Now if there’s a ton of stuff inside, as
we go down to narrower widths? That stuff can overflow. So. Can we use a minimum? Yes. If you want to set a section height at 800
pixels, setting it as MINIMUM height means it’ll be 800 pixels tall, but it’s going
to respect the width of stuff inside (it can get TALLER if it needs to). And it’s so versatile. Maybe you want a blanket rule on Paragraphs
in your project. Maybe you never want a paragraph to go more
than 60-ish characters wide. If we select ANY paragraph and go into the
All Paragraphs tag, we can set a MAXIMUM — we can set a maximum width to 60ch (whatever
value we want here). And that means that by DEFAULT, unless we
override it, paragraphs in our project will self-limit at 60 characters (60 zeroes in
whatever the typeface is). But that’s minimum and maximum...let’s
move on to overflow (which is surprisingly interesting). FIRST of all, overflow happens automatically. It happens on something like this Div block
when there’s a width and a height set on it — and when there’s not enough room
for the content inside. (This is just a Div block with a Paragraph
inside.) And SECOND, by default, all the text that
overflows is visible. (That’s why when you hover over the icon,
it says “visible.”) If you hide the overflow? That CLIPS (it HIDES) stuff outside the boundary
of the box. (We set overflow on the PARENT element that
has overflowing elements inside.) Scroll, depending on someone’s operating
system and browser, can display a scroll bar so people can scroll THROUGH what’s inside
the Div block, and auto will allow people to scroll — but it’ll ONLY do this IF
there’s enough content to overflow in the first place. If not, it doesn’t show a scroll bar and
it looks like you’d normally expect something to look. That’s overflow. Next up is object fit. If you place an element in a blank Div block
(we’re dragging in an image) — by default, that Div block is going to size itself to
respect the dimensions of that image. But here’s how we use object fit. Three parts: one, we need to set explicit
dimensions (let’s put in a width and a height — we’re doing this on the PARENT element
— the Div block)... two, we have to set our image to take up 100% of the width and
100% of the height INSIDE the parent... and three, once we're done with the first two,
we can actually try out the FIT properties: fill, contain, cover, none, and scale down. Let’s land on Cover for this example. And for things like COVER, it makes sense
to go in and set the position to wherever we want that origin (that anchor point to
be). Now. Object fit (those options we covered) — they’ll
all FIT the content inside of the parent element, but the thing to remember is that object fit
is set on the CHILD of a parent...and the PARENT needs a width and a height. But that’s object fit. And finally, for this lesson, let’s do a
quick review to reinforce what we’ve covered regarding size. We covered automatic sizing (how everything
on the web is sized based on the content INSIDE each thing). If we want to add some breathing room? Padding can ADD to the dimensions if something’s
automatically sized. We covered our size units (pixels for setting
absolute widths or heights, percentages which take up a certain percentage of the thing
it’s inside, ems which are based on the font size...where 1 em equals whatever the
element’s font size is, rems which SKIP all of that and look right to the root, usually
a user’s default font size, we covered VH, where something set to 100 vh takes up 100
percent of the viewport height, and VW, which is a German automotive corporation, we covered
vmin which is based on whichever viewport dimension is smaller, vmax, which respects
the LARGER dimension, we covered fractional units, which we can use inside grids to do
the math FOR us, and the final unit we covered was the CHARACTER unit — these we can use
to set a DIMENSION on an element...based on the width of that element’s typeface.) But that’s not ALL we covered. We covered setting minimum and maximum values
on our elements, so they don't get smaller and bigger than specific values we set. We covered how to use overflow settings to
hide important details. After that, we covered overflow and how to
hide it or even enable scrollbars. And we ended on object fit, in which something
like an image can FIT inside a parent if it meets THREE conditions: the parent needs to
have a width and a height, the image inside needs to have a width and height of 100%,
and its CHILD needs to have a FIT property selected. Now. There are a TON of ways to build using so
many of these units and these sizing properties...and there aren’t absolute rights and absolute
wrongs when it comes to choosing exactly what to use for any given situation. And as Sophocles so brilliantly put it “The
more familiarity we build with CSS sizing, the more we can APPLY these skills to create
almost anything for the web.”
