CSS Grid revolutionizes how we create layouts on the web — but how exactly should we use it? When someone emails you a PDF, how do you know the best way to get started? Where should you use what code? How do you translate a static drawing into a dynamic layout? In the spirit of Smashing’s “no slides” rule, Jen Simmons will live code a design from start to finish (or however close to finish she gets before time's up). No net, no preparation. How does someone in the real world create a layout using the tools of Intrinsic Web Design?
Someone asked @jensimmons if she was nervous before her talk and she goes “im bored of being nervous” and it was hard af— Chris Coyier (@chriscoyier) April 18, 2019
“Memo: All Designers -— product bits (@productbits) April 18, 2019
Remember all that stuff we told you?
... Obliterate that from your brain.
I want to trigger some creativity - now we can have much more interesting layouts.
Let’s keep going, we don’t have to use floats anymore.” 2/2@jensimmons #smashingconf
I think my brain is still trying to wrap around the “we need an empty row” concept in @jensimmons CSS Grid talk and realize it’s not an awful hack like weird empty spacer divs or table based layouts. The HTML is what needs to be semantic. #SmashingConf— James Rotering (@jrotering) April 18, 2019
"I want to send a memo to all designers who have been told they can’t do things over the years that now we’re making it possible to do them. I like to use print design for inspiration.” @jensimmons— Anna E Cook (@annaecook) April 18, 2019
Time to get creative y'all! #SmashingConf
@jensimmons proves that there is no better way to get familiar with css grids than playing around with translating designs and trying different values for every property... with the help of the amazing (and a bit buggy 😝) Firefox grid inspector #SmashingConf— Nasia Makrygianni (@nasiamakryg) April 18, 2019
The way you design page behavior on resizing with CSS Grid is different and has more possibilities than what we've done before with flexbox, tables and floats.— dominik.dev @ #smashingconf 🐼 (@DKundel) April 18, 2019
It's great to see @jensimmons work live on a Grid design, her thought process and what's possible!
// #SmashingConf pic.twitter.com/6YygBsSZzc
This is absolutely fantastic.— conference mode claire (@tackjhompson) April 17, 2019
I like @jensimmons suggestion that we can tell when a new tech approach gains critical velocity by when people start using bad hacks to get it to do things. But her reference to flexbox as the “old” approach we can’t let go of makes me feel... a certain way. #SmashingConf— James Rotering (@jrotering) April 17, 2019
I have all the FOMO right now.— Mike Sharp (@msharp) April 17, 2019
At @smashingconf, @chriscoyier throws @jensimmons a magazine print layout, some plain old semantic html, and the challenge of building it live on stage, and we are all *gripped*.— Phil Hawksworth @ SmashingConf SF (@philhawksworth) April 17, 2019
Insights into tooling, workflow, and critical thinking and I love it.
The @FirefoxDevTools now has a Changes tab to see the style changes you did to a page in an easy to consume way 😍 I missed that from the F12 tools of @MSEdgeDev— dominik.dev @ #smashingconf 🐼 (@DKundel) April 17, 2019
Thanks for the tip @jensimmons
// #SmashingConf pic.twitter.com/Pli2AvsWd5
One of my web design heroes @jensimmons is breaking down a magazine layout to reconstruct it with CSS Grid, live on stage at #smashingconf 🙌🏻 Designer heaven right here, @smashingmag pic.twitter.com/bH0HJiUfGB— Colin Johnston (@colinjohnston) April 17, 2019
CSS Grid revolutionizes how we create layouts on the web — but how exactly should we use it? For the last talk of this #SmashingConf @jensimmons will live code a design from start to finish. We can not think about a better finale.— Smashing Conference (@smashingconf) April 17, 2019