CSS Grids & Regions

CSS Grids & Regions

Predicting the future with Rachel Andrew, Eric Meyer, and Jeffrey Zeldman

Jen Simmons's picture by Jen Simmons on

115

The landscape of what's possible in web page layout is changing. Jen has a theory that this change will be a big one — perhaps the biggest change to graphic design on the web in over 15 years. Rachel, Jeffrey, and Eric join her to debate if that's true or not, and to surmise what the future might bring. This special episode was recorded live at An Event Apart Nashville.

Thanks to ImageEngine for supporting the show. Check out their free service at scientiamobile.com/webahead. And thank you An Event Apart. Use discount code AEAAHEAD for $100 off any two- or three-day event in 2016. And thank you to Casper. Use code WEBAHEAD for $50 towards any mattress purchase.

You can't layout blobs.

Show Notes: 
Related Episodes: 
Laying Out the Future with Rachel Andrew
Duration: 
4 897
Technology: 
CSS Grids & Regions
CSS Shapes & Exclusions
Flexbox
Is there a transcript?: 
Yes Transcript, Yes Comments

Laying Out the Future with Rachel Andrew

Jen Simmons's picture by Jen Simmons on

114

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.

Thank you An Event Apart for sponsoring the show! Use discount code AEAAHEAD for $100 off any two- or three-day event in 2016. And thanks to Squarespace. Use JENSENTME to get 10% off your first purchase.

Show Notes: 
List of Contents: 
  • The radical change that's coming to layout on the web
  • Grid, Flexbox, Alignment, Multicolumn, and more
  • What we've had to do for the last 15 years because we have not had proper tools for doing layout in CSS
  • Why we started using 960 Grid, Bootstrap, Foundation and other such layout frameworks
  • What can Grid do that floats cannot do
  • How is Grid different than Bootstrap
  • What's the difference between Grid and Flexbox? Why do we have two specs for layout?
  • How can we learn all these things?
    • Related Episodes: 
    CSS Layouts with Rachel Andrew
    Grids with Mark Boulton
    Predicting the future with Rachel Andrew, Eric Meyer, and Jeffrey Zeldman
    Duration: 
    6 444
    Technology: 
    CSS Grids & Regions
    CSS Shapes & Exclusions
    Flexbox
    Progressive Enhancement
    Is there a transcript?: 
    Yes Transcript, Yes Comments

    Changing the Shapes with Sara Soueidan

    Jen Simmons's picture by Jen Simmons on

    81

    So far, page layout on the web has predominantly consisted of a lot of boxes stacked on top of boxes — rectangular columns everywhere. That's about to change. New specifications, including CSS Shapes and CSS Exclusions, are about to change the shape of the “page.” Sara Soueidan joins Jen Simmons to explain.

    Thanks to MailChimp for sponsoring today's show. Head over to mailchimp.com/5by5 to learn about easy email newsletters. Send 12,000 emails per month to 2,000 subscribers for free, forever.

    We're not duplicating print design on the web. This is not the goal. But we will be able to use some features that we’ve always loved to have. It brings your designs to the next level.

    Show Notes: 
  • sarasoueidan.com
  • Sara Soueidan (SaraSoueidan) on Twitter
  • Sara Soueidan: Creating Non-Rectangular Layouts With CSS Shapes
  • Sara Soueidan: Using CSS Regions With CSS Shapes For A Better Reading Experience
  • CSS Shapes 101 · An A List Apart Article by Sara Soueidan
  • Moving Forward with CSS Shapes • An A List Apart Blog Post by Sara Soueidan
  • Razvan Caliman
  • Rachel Andrew's book: CSS3 Layout Modules, 2nd edition
  • 5by5 | The Web Ahead #49: CSS Layouts with Rachel Andrew
  • Adobe's Web Platform Team Blog
  • Adobe Web Platform on CodePen
  • CSS Shapes Gallery - a collection by Adobe Web Platform - CodePen
  • How to Enable Experimental Features in Web Browsers by Adobe
  • Google's Eric Seidel on why they removed CSS Regions from Chrome
  • CSS Figures specification
  • Ten CSS One-Liners to Replace Native Apps • A List Apart • Håkon Wium Lie
  • CSS Fragmentation Module Level 3
  • CSS Regions Considered Harmful • A List Apart • Håkon Wium Lie
  • Sara Soueidan: CSS Regions Matter
  • Making the Web Sweeter with Food Network and Cupcakes | Adobe
  • Demo for Alice's Adventures in Wonderland, by Lewis Carroll
  • Sign up for The Web Ahead newsletter
  • Shapes | Web Platform Team Blog
  • Can I use... Support tables for HTML5, CSS3, etc
  • 5by5 | The Web Ahead #63: The Latest in CSS with Chris Coyier
  • CSS Shapes Editor for Chrome
    • List of Contents: 
  • Creating non-rectangular layouts
  • The CSS Shapes Level 1 specification
  • How to contribute to everyone's learning and become an internet superstar along the way
  • The CSS Exclusions specification
  • The CSS Figures specification
  • What's newly possible in page layout?
  • The debate around CSS Regions
  • Alternatives to Regions
  • The CSS Fragmentation specification
  • The CSS Shapes Level 2 specification with SVG paths
    • Related Episodes: 
    CSS Layouts with Rachel Andrew
    Transforming the Shapes with Eva Ferreira
    Duration: 
    4 125
    Technology: 
    CSS Grids & Regions
    CSS Shapes & Exclusions
    Is there a transcript?: 
    Yes Transcript, No Comments
    Subscribe to RSS - CSS Grids & Regions