CSS Laid Out

Who am I?

Phil Nash

@philnash

MintDigital

Modern CSS layout methods

• Floats

Floats

All we really wanted to do with floats was have our text flow around images. Probably images of cats, since we're on the Internet. This cat, for example, is pretty fat. He looks lazy too, but he doesn't care. Being a cat is a good life if you can get it. Purrrrfect.

Modern CSS layout methods

• Floats
• Tables
• Flexbox
• Grids

display:table

display:table;
display:table-row;
display:table-cell;

Issues

• Divs that look like tables
• Different behaviours of table cells
• Tables aren't very responsive

Further reading

Everything you know about CSS is wrong — Rachel Andrew

Flexbox

.container{
	display:flex;
}
	

Flexbox

.container{
	display:flex;
	flex-direction:row / row-reverse /
				   column / column-reverse;
}
	

Flexbox

.container{
	display:flex;
	justify-content: flex-start / flex-end / center /
					 space-around / space-between;
}
	

Flexbox

.container{
	display:flex;
	align-items: flex-start / flex-end / center /
					 baseline / stretch;
}

	

Further reading

• Getting Boxfresh with Flexbox — Anthony Killeen
• Flexbox — fast track to layout nirvana? — Chris Mills
• Using CSS flexible boxes — MDN

Grids

.container{
	display:grid;
	grid-columns: 3fr 1fr;
}
	

Grids

.container{
	display:grid;
	grid-columns: (3fr 1fr)[11] 3fr;
}

	

Grids

.grid-element{
	grid-column:1;
	grid-row:1;
	grid-column-span:5;
	grid-row-span: 3;
}

	

Issues

• Support (obvs)
• Difficult to apply to variable lengths of items (use other techniques instead, like flexbox)

Use it now?

Of course! Windows 8 apps!

Further reading

Giving Content Priority with CSS3 Grid Layout — Rachel Andrew

What to do?

• Use display:table now! (if you like tables)
• Try flexbox, try grids, they are real now and they are the future

Image credits

• comedy_nose http://www.flickr.com/photos/comedynose/6766568985/
• brokinhrt2 http://www.flickr.com/photos/dq090702/2836742849/
• Ed Yourdon http://www.flickr.com/photos/yourdon/2807527198/
• nikoretro http://www.flickr.com/photos/bellatrix6/1307790239/
• jessica mullen http://www.flickr.com/photos/jessicamullen/3672695368/
• puggles http://www.flickr.com/photos/puggles/2635370660/

Phil Nash

@philnash

MintDigital

Questions?