slides.oddbird.net/workshops/23-smashing-de/3-flow/

Context & Flow

Miriam Suzanne @ Smashing Conf Freiburg

Design Unknown Content
On An Unknown Canvas

CSS is Contextual

CSS is Content-ual

CSS has Real Layout Tools

Not just Grid or Flexbox, but an entire system…

  1. (Fixing) The Box Model

  2. Normal Flow
  3. Intrinsic Sizing
  4. Aspect Ratios
  5. Object Position
  6. Display Complexities
  7. Overflow & Scroll
  8. Writing Modes & Orientation
A series of nested boxes - one is solid-lined and labeled 'box'

Default Sizing… Content-Box

Useful for… Defining Content Size

Like a page wrapper with a max width, plus padding

More Often… Border-Box Sizing

Reset Global Box-Sizing 

*, *::before, *::after { box-sizing: border-box; }

Box Properties 👎 Shouldn’t Inherit 

html { box-sizing: border-box; }
* { box-sizing: inherit; }
  1. (Fixing) The Box Model

  2. Normal Flow

  3. Intrinsic Sizing
  4. Aspect Ratios
  5. Object Position
  6. Display Complexities
  7. Overflow & Scroll
  8. Writing Modes & Orientation
Boxes inside labeled 'content', provide 'implicit' sizing to the box

Intrinsic Sizing

  • Content sizes
  • width or height of min-content, max-content, etc
Parent box labeled 'context', and styles from the box itself provide 'explicit' sizing to the box

Extrinsic Sizing

  • Context sizes (available space)
  • width or height set in px, %, em, etc
Two circles labeled context and content, with arrows going both ways

Trust The Flow

Use absolute/fixed position with caution

See the Pen Positioning & Flow by @miriamsuzanne on CodePen.

😎 Fing Cool Feature

The reason Container Queries Are Difficult

💥 Size » Query » Change » Resize 💥

  1. (Fixing) The Box Model
  2. Normal Flow

  3. Intrinsic Sizing

  4. Aspect Ratios
  5. Object Position
  6. Display Complexities
  7. Overflow & Scroll
  8. Writing Modes & Orientation

Intrinsic Size Keywords

max-content | min-content | fit-content

A series of nested boxes - one is solid-lined and labeled 'box'
Boxes inside labeled 'content', provide 'implicit' sizing to the box

Intrinsic Sizing

  • auto
  • min-content
  • max-content
  • fit-content

Grid only function fit-content(<max>)

min(max-content, max(min-content, <max>))

fit-content Keyword

fit-content(stretch)

Parent box labeled 'context', and styles from the box itself provide 'explicit' sizing to the box

Extrinsic Sizing

  • Context sizes (available space)
  • width or height set in px, %, em, etc

See the Pen Intrinsic Sizing by @miriamsuzanne on CodePen.

  1. (Fixing) The Box Model
  2. Normal Flow
  3. Intrinsic Sizing

  4. Aspect Ratios

  5. Object Position
  6. Display Complexities
  7. Overflow & Scroll
  8. Writing Modes & Orientation

Use Image Width/Height

to avoid jumpy layout while loading

Extrinsic Aspect-Ratio

aspect-ratio: <ratio>;

Mixed Aspect-Ratio

aspect-ratio: <ratio> auto;

See the Pen Image ratio css, html hints, and natural sizes by @miriamsuzanne on CodePen.

  1. (Fixing) The Box Model
  2. Normal Flow
  3. Intrinsic Sizing
  4. Aspect Ratios

  5. Object Position

  6. Display Complexities
  7. Overflow & Scroll
  8. Writing Modes & Orientation

Replaced Elements… object-fit & object-position

object-position ~= background-position

Same values, but for placing an object

object-fit: fill

contain | cover | scale-down

  1. (Fixing) The Box Model
  2. Normal Flow
  3. Intrinsic Sizing
  4. Aspect Ratios
  5. Object Position

  6. Display Complexities

  7. Overflow & Scroll
  8. Writing Modes & Orientation

Re-Introducing The Display Property

Turn off Box Generation

content | none

Display: Contents

Remove those pesky extra divs…

Data on support for the css-display-contents feature across the major browsers from caniuse.com

New… Display: Flow-Root

“A mini layout in your layout”…

Flow-Root Block Formatting Context

Clear floats, prevent margin-collapse…

See the Pen Floats and the BFC by @miriamsuzanne on CodePen.

See the Pen BFC Margin Collapsing by @miriamsuzanne on CodePen.

See the Pen A BFC preventing wrapping of floats. by @miriamsuzanne on CodePen.

Data on support for the flow-root feature across the major browsers from caniuse.com

Also… Multiple-Value Display

outside and inside

Decomposing Inline-Block…

Display-Outside Inline Flow-Root…

Behavior in parent layout

Display-Inside Inline Flow-Root

Context for child layout

Can I use… Multi-Value Display?

Get Explicit Block Flow, Block Flex…

The default outer value, when only inner is set

Get Explicit Block Flow

The default inner value, when only outer is set

  • block » block flow
  • flow-root » block flow-root
  • inline » inline flow
  • inline-block » inline flow-root
  • flex » block flex
  • inline-flex » inline flex
  • grid » block grid
  • inline-grid » inline grid

Fine to Keep Using Single-Values

  1. (Fixing) The Box Model
  2. Normal Flow
  3. Intrinsic Sizing
  4. Aspect Ratios
  5. Object Position
  6. Display Complexities

  7. Overflow & Scroll

  8. Writing Modes & Orientation

See the Pen Rad by @miriamsuzanne on CodePen.

First… Do No Harm

Text-Overflow

clip | ellipsis

Not a Content Strategy

Makes dangerous ass… (umptions)

Overflow-Wrap

break-word | anywhere

See the Pen Overflow-Wrap by @miriamsuzanne on CodePen.

Box Overflow

overflow-x/-y | overflow-inline/-block

Default Visible

Acts like auto when single-axis

Overflow Hidden

  • no scroll bar
  • clipped at padding-box edge
  • programmatic scrolling is allowed

Overflow Clip

  • no scroll bar
  • clipped at padding-box + overflow-clip-margin edge
  • programmatic scrolling not allowed
Polypane website hero area, with a 3d browser window popping out of the content area, but clipped at the page edge

Can I use… Overflow Clip?

Overflow Scroll / Auto

(usually auto…)

See the Pen Rad by @miriamsuzanne on CodePen.

Scroll Snapping

See the Pen Scroll Snap Gallery by @miriamsuzanne on CodePen.

See the Pen Scroll Snap Demo & Notes by @miriamsuzanne on CodePen.

  1. (Fixing) The Box Model
  2. Normal Flow
  3. Intrinsic Sizing
  4. Aspect Ratios
  5. Object Position
  6. Display Complexities
  7. Overflow & Scroll

  8. Writing Modes & Orientation

Writing Modes

horizontal-tb | vertical-rl/lr | sideways-rl/lr

Data on support for the css-writing-mode feature across the major browsers from caniuse.com

Can I use… Sideways Writing Modes?

Text-Orientation

mixed | upright | sideways

Data on support for the css-text-orientation feature across the major browsers from caniuse.com

See the Pen Writing Modes & Orientation by @miriamsuzanne on CodePen.

Understand Logical Dimensions

Writing-Mode Relative

Inline ↔ Axis Text Flow & Box Stretching

Block ↕ Axis Text Wrap & Box Stacking

Relative to… Physical Space

*-top/*-bottom/*-right/*-left

Relative to… Writing Mode

*-inline/*-block & *-start/*-end

See the Pen Logical properties demo: inline form by @miriamsuzanne on CodePen.

MDN has Complete Logical Listing

See the Pen Scroll Snap, Aspect Ratios, Writing Modes by @miriamsuzanne on CodePen.