Web Design Experimental Layouts

• Design, Experimental

5 min. (989 words)

web-design-experimental-layouts

Demos for 2019

Intro to CSS Grid

Study of Flexibility

Study of Overlap

Study of Viewport

Study of Whitespace

Study of Verticality

Study of Density

Examples for 2018 Talk on Intrinsic Web Design

Return of the 1990s

CSS Shapes

Clip Path

Object Fit

Object-fit has terrific support. Object-position isn’t supported in Safari 9, but will be in Safari 10. Mostly, we need the Edge team to add both.

Multicolumn

Multiple Column Layout works has worked in browsers forever — including IE10 . There are some remaining bugs however, and we need break-before, break-after, break-inside to accomplish many design ideas. With some care, though, we can use multicolumn today.

Study of Initial Letter

Study of Writing Modes

Study of Flexbox

Other Experiments

Rotation

Rotation is a 2D Transformation, which doesn’t work in IE8 & earlier, or in Opera Mini. Oh well. Things can be straight in those browsers and rotated everyplace else.

Hexagon Layouts

I’m trying to figure out how to best do this layout. I want hexagons to nest, to be fluid, and I want them to automatically align themselves into different number of columns based on how much space there is. Sometimes 1 column, 2 col, 3col, 4col, 5col, etc. Hexagon 4 does this — alters the number of columns based on how much space there is. But I’m not sure how to get the hexagons to nuzzle up next to each other in Hexagon 4. I’m thinking named lines might help, which is why I used them in Hexagon 5, but that would only help if we could tell auto-placement to figure out what the next named line is in the available space. Something like “Hey go to the next line with this name” instead of “go to named line number 2”. Of course, this could be done with a lot of long-hand specifying and a bunch of media queries. Basically Hexagon 2 or 3 with lots more code for multiple breakpoints. Or maybe there’s a completely new way to go at this. Hmmmm.

The CSS Grid versions require a browser that supports CSS Grid. You also need a browser that supports Clip Path. If you use Firefox Nightly, flip the flag to turn on clip-path.

Image Gallery Study

The CSS Grid examples require a browser that supports CSS Grid. It works best in Firefox Nightly.

Study of Practicality

Set 1

Set 2

Exercises 1–7

Exercises 8-11

A Study of Three Properties

Vertical vs Sideways

Logo Layout

Headline Options

Flow-root Demo

A Study of Columns and the Need for Regions, part 1

These demos (D–J) only work in Safari Technical Preview.

A Study of Flexbox vs Grid (In Progress)

The CSS Grid demos require a browser that supports CSS Grid.

Under Construction Ideas