Page layout on the web has been constrained for many years by the available technologies. But new technologies that are coming in CSS3 â flexbox, grid layout, regions, and more âÂ promise for an interesting future. Rachel Andrew joins Jen Simmons to explai
By now, you’ve probably heard of “flexbox,” short for the CSS Flexible Box Layout module and the most fully developed and well supported of CSS3’s wide array of new layout mechanisms. Flexbox allows you to create fluid, responsive layouts without having to worry about crazy percentage grid widths, negative margins, float drop, and all those pesky CSS layout quirks we’ve dealt with for over a decade. But with cross-browser support still incomplete, you’ve probably relegated flexbox to the “one day” pile of web design tricks. It’s time to stop waiting. In this talk, Zoe aims to convince you that it’s a good idea to start learning and using flexbox today. We’ll look at several practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with graceful fallbacks. You’ll learn how to take your designs—and web design skills—to the next level as we combine flexbox with other layout mechanisms and take advantage of its easy methods to size, align, and rearrange content.
Grid is getting a ton of support in modern browsers and so we’ve got a couple of grid experts in Jen Simmons and Rachel Andrew on to help us navigate the grid – what is it? When can we use it? How do flexbox and grid play together? What about Bootstrap?
7:00 What is grid? And what does it mean?
16:30 What’s the mobile story for grid?
22:30 What is grid and why should someone be excited about it?
27:40 What about all that extra CSS with grid?
36:10 What’s autofill?
47:40 How do flexbox and grid play together?
1:01:02 When should you use something like Bootstrap?
Note: Miriam was filling in for Amélie Lamont who fell very ill and was unable to attend the conference. Miriam found out she was speaking less than 30 minutes before having to present.
I built Susy, a Sass grid system that can generate any grid technique you like — but I haven’t used it in years. I’ll show you how various grid systems work, and how to avoid using them. For those few cases where a grid really is required, we’ll talk about the best ways to roll your own, so you’re not relying on a bloated library to make decisions for you. We’ll also look at the new layout toys — from flexbox to CSS Grid — and how to get started with only a few lines of code.
- When to use floats, CSS Grid, flexbox, custom properties, and other techniques.
- How to make grid-math simple, and lose the grid-system.
- How to make grid-systems work for you when you need them.
Presented by Miriam Suzanne at Clarity 2017, on November 28th, 2017. Ends with an interview with Una Kravets
Rachel Andrew is a CSS Grid Layout module superfan. It’s the layout method she’s been waiting for ever since she started dabbling in CSS for layout in the late 90s. Having tracked development of the module from the early days of the IE10 implementation, she is very excited to see it come to life in Chrome. In this talk Rachel will show you how Grid Layout works, and explain why you should become a fan of Grid Layout too.
Recorded July 2nd, 2015. This week we talked about responsive design rules and grid systems on the web.
Everything about web page layout is changing. New CSS specifications will make it possible to do designs we’ve never seen before. Rachel Andrew joins Jen Simmons to talk about what’s happening.
Recorded October 16th, 21014. We make a big announcement and discuss online abuse.
Recorded November 10th, 2015. This week we discussed the next great American invention and the aesthetics of wealth.
This week we talked about the growing hill that is the web and the devices that shape our message.