Below are the advanced slides for my WordCamp Europe 2017 talk CSS Grid Changes Everything (About Web Layouts) presented June 17th, 2017 in Paris, France:
From the website:
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.”
Links from the talk
- Photo of Dr. Martens boots by Kevin Spencer, BY-NC
- _S (Underscores) WordPress Starter Theme
- Codepen demonstrating a CSS Grid layout with content reordering
- Can I Use display: grid
- Jen Simmons Tweet about New York Times using CSS Grid
- Firefox CSS Grid Inspector at MDN
- Grid by Example by Rachel Andrew
- MDN CSS Grid documentation
- CSS Tricks’ Complete Guide to CSS Grid
- Kuhn – a WordPress theme based on CSS Grid
- Build Production-Ready CSS Grid Layouts Today at Smashing Magazine
Video of the talk will be posted here as soon as it’s available. Until then, read through the slides above and follow the links for more information on this transformational CSS module.