slides.oddbird.net/rws/smashing/space/

Distributing Space

@ Smashing Online
USS Enterprise, 
from Star Trek The Next Generation
opening credits

Design Unknown Content
On An Unknown Canvas

CSS is Contextual

Primary Question… How Will This Change?

??? Content

??? Viewport

Since 2010 Responsive Web Design

  1. Fluid % Images
  2. Fluid % Columns
  3. @media Queries
A wide-screen wireframe
A small-screen wireframe
A wide-screen wireframe with different sizes

Grid Math Sux It’s a % Hack

.grid-span {
width: percentage( /* 23.7288136% */
((3 * 4em) + (2 * 1em)) / ((12 * 4em) + (11 * 1em))
);
margin-right: percentage( /* 01.6949153% */
1em / ((12 * 4em) + (11 * 1em))
);
padding-left: percentage( /* 08.4745763% */
((1 * 4em) + (1 * 1em)) / ((12 * 4em) + (11 * 1em))
);
}

Not perfect, but… ✅ For Effort

??? Writing Mode

??? Fonts

??? Interface

??? Resolution

??? Aspect Ratio

??? Color Gamut

??? &c…

CSS has Real Layout Tools

Not just Grid or Flexbox, but an entire system…

2018… Intrinsic Web Design

  1. Fluid & Fixed
  2. Stages of Squishiness
  3. Truly Two-Dimensional Layouts
  4. Nested Contexts
  5. Expand & Contract Content
  6. Media Queries, As Needed
  1. Fluid & Fixed
  2. Stages of Squishiness
  3. Truly Two-Dimensional Layouts
  4. Nested Contexts
  5. Expand & Contract Content
  6. Media Queries, As Needed

But First… Control the Box Model

Default… Content-Box

Often… Border-Box

Reset Global Box-Sizing

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

Box Properties 👎 Shouldn’t Inherit

html { box-sizing: border-box; }
* { box-sizing: inherit; }

Re-Introducing The Display Property

New… Display: Contents

Remove those pesky extra divs…

New… Display: Flow-Root

“A mini layout in your layout”…

Flow-Root Block Formatting Context

Clear floats, prevent margin-collapse…

Also… Multiple-Value Display

inline-block saw it coming…

Display-Outside Inline Flow-Root…

Behavior in parent layout

Display-Inside Inline Flow-Root

Context for child layout

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

  • blockblock flow
  • flexblock flex
  • inline-flexinline flex
  • inline-blockinline flow-root

Writing Modes

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

Text-Orientation

mixed | upright | sideways

miriamsuzanne.com

subtle use for list-headers

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

Intrinsic Sizes

max-content | min-content | &c.

fit-content(<max>)

grid-only for now, so we’ll come back to it

Intrinsic Aspect Ratios Using Image Width/Height

to avoid layout jank

Flex Container display: flex

Content-Out Sharing Space

use grid for layout-in

.default-values {
flex-direction: row; // column[-reverse]
flex-wrap: nowrap; // wrap | wrap-reverse
}

See the Pen Flex-flow by @mirisuzanne on CodePen.

Flex Items flex-grow: 1

Distribution of Available Space

Flex Items flex-shrink: 1

Distribution of Unavailable Space

Flex Items flex-basis: auto

The ideal starting width, before flexing

Four Flex Shorthand Values

initial | auto | none | <grow>

Initial Shrink, If Necessary

Same as 0 1 auto

Auto Shrink or Grow

Same as 1 1 auto

None Don’t Flex

Same as 0 0 auto

Share Space Equally

Same as <grow> 1 0

Box Alignment

currently in flexbox & grid…

🤯 On Both Axis

Inline Axis justify-*

justify-content | justify-items | justify-self

Block Axis align-*

align-content | align-items | align-self

Shorthand place-*

place-content | place-items | place-self

Positional Values

start | end | center

Baseline Values

baseline | first baseline | last baseline

Distributed Values

stretch | space-between | space-around | space-evenly

Overflow Keywords

safe | unsafe

Real Gutters*

row-gap | column-gap | gap

order: 3

In flex or grid layout…

See the Pen Flex-Order by @mirisuzanne on CodePen.

!important Accessibility Issues

*-reverse | order

Authors must use order and the grid-placement properties only for visual, not logical, reordering of content.

Grid Specification

Use ordering To Improve Readability

Always check your tab-order…

  1. Start with structured & accessible HTML
  2. Create a responsive & responsible layout
  3. If you re-order, consider updating the DOM

Viewport Relative Units

vw | vh | vmin | vmax

Full-Height…

height: 100vh

Sticky-Footer…

min-height: 100vh

Responsive Type

font-size: calc(1em + 2vw)

Breaking Out

margin-inline: calc(50% - 50vw)

Watch out for… 100vh Phone Jank

Replaced Elements… object-fit & object-position

object-position ~= background-position

Same values, but for placing an object

object-fit: fill

contain | cover | scale-down

Multicolumn columns: 5 10em;

column-count | column-width

See the Pen Multicolumn by @mirisuzanne on CodePen.

@MiriSuzanne #ResilientWebSystems