Categories
Speaking Engagements

WCEU2017: CSS Grid Changes Everything (About Web Layouts)

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:

“CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.

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

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.

Header photo by Mark Sallman.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

6 replies on “WCEU2017: CSS Grid Changes Everything (About Web Layouts)”

I just watched the recording of your WCEU talk on CSS Grids. One word: Inspiring.

Hats off to you for a very captivating talk. The way you explained all the details about CSS Grid was clear. Even though I am not a designer by trade, I am excited to try this out. Your presentation skills are top notch!

Many thanks for asking and answering that question about whether the Frameworks will adopt the CSS Grid. Primarily, I work with ecommerce sites, so I can see how the CSS Grid makes things much easier with less work.

I currently use Genesis. I am not too sure whether or not they do/will support CSS Grid in the near future.

I have a question. I am just beginning to learn CSS with the goal to completely re-code my hobby website to a RWD. I desktop site was a boiler plate design so I didn’t code the CSS part.

If i am just beginning the learning CSS part, should I start with traditional CSS or try to understand the grid components? What would be the best learning path with this goal in mind.

I would really appreciate your response.
Don

@Don – In my opinion, learn HTML, CSS and JavaScript as deeply as time and interest allows. This will hold you in good stead for most things in web design and development. CSS Grid is just a new addition to CSS. As always, when to use CSS Grid depends on your project needs (i.e. do you have to support older browsers which don’t handle CSS Grid?). Even here you can do it so your CSS grid layout progressively falls-back to something older browsers can support.

Hi, I found only today your presentation on YT (https://www.youtube.com/watch?v=7kVeCqQCxlk).

First of all… AWESOME! I start just now to change my way of make it, finally!
From the first words… is so.. why we have to do these… hacks always to respect the design!

So excited, and start to spreading to all collegues and friends.

Btw… for single elements like a styled button (that before was in charge to bootstrap, foundation…) what is your approach? In you experience using CSS grid?

Thanks,
Alessandro aka keebOo

Comments are closed.