slides.oddbird.net/workshops/23-smashing-de/4-space/

Distributing Space

Miriam Suzanne @ Smashing Conf Freiburg

Since 2010 Responsive Web Design™

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

A holdover From Print Page Description

The % unit Not Actually Fluid

Relative to parent, ignores siblings

Headshot of Jen Simmons

@jensimmons Jen Simmons

Everything You Know About Web Design Just Changed

Intrinsic Web Design

The responsive web keeps evolving…

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

Can involve… Defined Layouts

But first… Distributing Space

And… Managing Alignment

  1. Flexbox & Alignment

  2. Viewport Units
  3. Comparison Functions
  4. MultiColumn

Flex Container… display: flex

Content-Out Elements 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 @miriamsuzanne 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 @miriamsuzanne 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
  1. Flexbox & Alignment

  2. Viewport Units

  3. Comparison Functions
  4. MultiColumn

Viewport Relative Units

vw/vi | vh/vb | vmin | vmax

Responsive Type

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

Be sure to test… Zoom In/Out

Get fancy… utopia.fyi

Breaking Out

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

Watch out for… 100vh Phone Jank

On an example phone, the large viewport fills the full screen with all browser chrome hidden - the small viewport fills the remaining space when top and bottom browser chrome are visible

Small Viewport Units

svw/svi | svh/svb | svmin | svmax

Great for… Full(ish)-height sections

Large Viewport Units

lvw/lvi | lvh/lvb | lvmin | lvmax

Dynamic Viewport Units

dvw/dvi | dvh/dvb | dvmin | dvmax

  1. Flexbox & Alignment
  2. Viewport Units

  3. Comparison Functions

  4. MultiColumn

Comparison Functions

min(), max(), and clamp()

Min and Max Multiple Calculations 

min(1em + 1vw, 2em, 15%) /* use smallest */
max(10 * (1vw + 1vh) / 2, 1em) /* use largest */

Nested Calculations 

max(1.5em, min(1em + 1vw, 3em))

Clamp() Dynamic Between Min & Max

clamp(<min>, <dynamic>, <max>) 

clamp(1em, 1em + 2vw, 5em)

These are Math Functions

🙅🏻‍♀️ Not Allowed 

min(min-content, auto)
  1. Flexbox & Alignment
  2. Viewport Units
  3. Comparison Functions

  4. MultiColumn

Multicolumn columns: 5 10em;

column-count | column-width

See the Pen Multicolumn by @miriamsuzanne on CodePen.