Modern Layouts with CSS Grid, Flexbox, Calc, and Custom Properties

Jen Kramer

Friday 8 March 2019 from 11:00 to 12:00

Talk in English - US at Midwest PHP 2019
View Slides: https://www.slideshare.net/jen4web/modern-layouts-with-css-grid-flexbox-calc-and-custom-properties
Checkout the code: https://codepen.io/jen4web/post/rwd20readinglist
Checkout the code: http://bit.ly/rwd2019
Checkout the code: https://codepen.io/jen4web/pen/oQzxar?editors=1100
Short URL: https://joind.in/talk/5e728 (QR-Code (opens in new window))

Avg. Rating

For the first time in the history of the web, CSS is graced with tools for laying out web pages without hacks. Flexbox and Grid have made a tremendous impact on the industry, providing methods for creating responsive websites with designs not previously possible. CSS Calc and CSS Custom Properties give us a first chance to use math and variables within CSS itself, without requiring compiling. Together, these four new CSS modules work together to revolutionize CSS in modern evergreen browsers. Attendees will leave with an understanding of creating custom responsive designs with the latest tools for layout, using semantically correct HTML markup and the latest CSS modules.

Comments

Comments are closed.

Michael Lehmkuhl at 12:56 on 8 Mar 2019

Thanks for the rundown of the latest, greatest code for frontend styling and layout.

Jen Kramer (Speaker) at 12:57 on 8 Mar 2019

Thank you, Michael! So pleased you enjoyed it.

Ashley Ohlrogge at 14:08 on 8 Mar 2019

Good information, important disclaimers about it being bleeding edge and not cross browser compatible.

Jen Kramer (Speaker) at 14:26 on 8 Mar 2019

Thanks Ashley - as always, it depends on what browsers you're able to support. Once IE11 goes away, this will become our new coding standard.

Roger Creasy at 15:57 on 8 Mar 2019

Wow! I learned so much. I am amazed at the modern additions to CSS. Jen did a terrific job of covering some of them. Great talk that I highly recommend.

Jen Kramer (Speaker) at 15:59 on 8 Mar 2019

Thank you, Roger! :-)

Max Schwanekamp at 23:40 on 8 Mar 2019

Excellent talk. There were a few awkward moments where Jen asked questions of the audience, but we weren't yet warmed up to the kinds of answers she was looking for. But hey, she easily made up for that in overall communicating the value of calc() and var(), especially in the context of pre-processors.

Jen Kramer (Speaker) at 06:41 on 9 Mar 2019

Thanks Max! I know most audiences are expecting to be asked questions by the presenter, but it's a good technique to improve engagement. Thanks for coming!

Amy Gebhardt at 10:06 on 12 Mar 2019

This was mostly review for me but Jen delivered the content in such a fun, approachable way, especially for folks who don't normally write a whole lot of CSS! The examples were complete and though live-coding rarely goes well, she absolutely nailed it. It was well prepared and engaging.

Jen Kramer (Speaker) at 10:55 on 12 Mar 2019

Thank you Amy - so pleased you enjoyed it!