The Future of Layout

...or at least, some of it

Everything on a Grid

First Stop:

LAYOUT

Flexbox's Concepts

Flexbox has 4 parts:

1. Direction - flex-flow
2. Alignment - justify-content, align-items, align-self, align-content
3. Ordering - order
4. Flexibility - flex

Not good for all page layout

Fine for linear designs

Also okay for most sites with a simple header/footer/multi-column body

Bad for more complex, two-dimensional designs

Responsive Designs

Not good for all page layouts

Not good for all page layouts

<vbox>
	<hbox>
		logo
		<vbox>
			header
			nav
		</vbox>
	</hbox>
	<hbox>
		news
		text
		pics
	</hbox>
	footer
</vbox>

Not good for all page layouts

Not good for all page layouts

<vbox>
	<hbox>
		logo
		<vbox>
			header
			nav
		</vbox>
	</hbox>
	<hbox>
		news
		<vbox>
			<hbox>
				text
				pics
			</hbox>
			footer
		</vbox>
	</hbox>
</vbox>

Grid makes it better

Grid makes it better

body {
	display: grid;
	grid-template: "logo    header  header"
	               "logo    nav     nav"
	               "news    text    pics"
	               "footer  footer  footer";
}

#logo   { grid-area: logo; }
#header { grid-area: header; }
#nav    { grid-area: nav; }
…

Responsive Designs

What's the Future?

Flexbox and Grid solve 90% of use-cases.

There will be a Flexbox 2.

CSS Extensions

Want to investigate extensible layouts.

The End

@tabatkins

xanthir.com/+

xanthir.com

xanthir.com/talks/2014-07-17/