What layout are we talking about?

Cannot center content vertically.

No ligatures.

What is possible in modern browsers?

(Latest of Chrome, Safari, Internet Explorer, Firefox)

Center content vertically.

Organize content outside of source order (somewhat).

Widow, orphan controls.

Ligatures.

What can we see in the future?

Actual layout of content irrespective of order in HTML.

Clip containers into any shape.

Text wrapping without rectangles.

What we will cover

• Flexbox
• Widows, Orphans
• Ligatures
• Regions
• Grids
• Clipping Paths
• Shapes
• Font loading events

Flexbox

.flex-container {
 display: flex; 
 justify-content: center; 
 align-items: center; 
}

What else can Flexbox do?

• Distribute elements among full height of viewport
• Align horizontally

More examples: codepen.io/tag/flexbox

Widows, Orphans

.multicol h1 {
    widows: 4;
}

Ligatures

Demo

Future

Full control of content layout

Regions

Demo

• flow-into
• flow-from
• region-break-after
• region-break-before
• region-break-inside

Use cases

Fold content inline: css-tricks.com/examples/AdRegions/

Content irrespective of order in markup.

Full control over templates for all your break points.

More examples: codepen.io/collection/jabto

Organizing content in grids

Grids

Demo

Clipping content in shapes

Clipping Paths

Demo • progress toolbar • html5rocks.com/en/tutorials/masking/adobe/

Shape Tools

betravis.github.io/shape-tools/polygon-drawing/

Wrapping Content in Shapes

Shapes

Demo

More Examples

codepen.io/collection/qFesk

Greater control over web fonts

Font Load Events

Load a font, take action when fonts are loaded

• document.fontloader.loadFont
• document.fontloader.checkFont
• document.fontloader.onloading
• document.fontloader.onloadstart
• document.fontloader.onerror
• document.fontloader.onloadingdone
• document.fontloader.notifyWhenFontsReady

Demo

Now

• Flexbox
• Widows, Orphans
• Ligatures

Future

• Regions
• Grids
• Clipping Paths
• Shapes
• Font-Loading Events

Follow

@adobeweb & codepen.io/adobe/