Thinking with Grid
A presentation at Smashing Conference in in San Francisco, CA, USA by Jen Simmons
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?
for free. You
can too.
Buzz and feedback
Here’s what was said about this presentation on social media.
-
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 -
After @jensimmons talk today I’m totally moving to firefox developer tools from now on! Super cool/useful features I had no idea exist! 🙈🙈 pic.twitter.com/B3F3fyKcFh
— Nour Saud 💫 (@Nour_ASoud) 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 -
“Remember the days when designers would give us their wacky designs and ask us to build it and we’d have to say say no, that’s not how the web works?” 1/2@jensimmons #smashingconf
— product bits (@productbits) April 18, 2019 -
I think I just got an adrenaline rush while watching @jensimmons code live at @smashingconf... #SmashingConf pic.twitter.com/iaHw8rdUCK
— Mandy Cox (@iNeedAdult) April 18, 2019 -
.@jensimmons' Experimental Layout Lab is amazing!
— Meowlivia_ (@meowlivia_) April 18, 2019
👉 https://t.co/Oma0ekMIE9 -
Building in CSS Grid with the amazing and hilarious @jensimmons. Tons of intra-layout flexibility to scale layouts with graphic effect. #SmashingConf pic.twitter.com/MosQ8f25gC
— Brendan Falkowski (@Falkowski) April 18, 2019 -
Wow, @jensimmons is on a whole other level. Salute! https://t.co/yPZqVX4a9F
— Gerard K. Cohen (@gerardkcohen) April 18, 2019 -
— 🦕 ʙ ʟ 🌋 ĸ ᴇ 🦖 (@Blake_Petersen) April 18, 2019
-
@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 -
Impressive: “Thinking in Grid” @jensimmons from @firefox recreates an article she’s never seen into a webpage from scratch, advising as she goes. Wonderful. #smashingconf pic.twitter.com/wgkODySjst
— product bits (@productbits) 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 -
One of the big advantages of CSS grid is contolled / non-proportional column collapsing. Example 👉 https://t.co/tyfzVCqfJN @jensimmons #SmashingConf
— Marko Dugonjić (@markodugonjic) April 17, 2019 -
This is absolutely fantastic.
— conference mode claire (@tackjhompson) April 17, 2019 -
Massive props to @jensimmons for live coding a print layout in CSS Grid at @smashingconf 👏👏 definitely not an easy job 👏👏 pic.twitter.com/Fsf6rGlrY1
— dominik.dev @ #smashingconf 🐼 (@DKundel) 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 -
If you haven’t watched @jensimmons live code, you haven’t lived. #SmashingConf
— Mandy Michael @ SmashingConf SF (@Mandy_Kerr) April 17, 2019 -
Love watching @jensimmons think about grids (and dev tools) in real time. pic.twitter.com/b73CBSDqfp
— Miriam Suzanne (@MiriSuzanne) April 17, 2019 -
Witnessing the bravery of @jensimmons live coding a grid layout on the spot at @smashingconf. pic.twitter.com/aBI6AvVMU0
— Jeremy @ SmashingConf SF (@malchata) April 17, 2019 -
Thinking with Grid, with @jensimmons #SmashingConf pic.twitter.com/OyweLO9t6w
— Drew McLellan (@drewm) 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 -
Changes tab in dev tools in Firefox. @jensimmons #SmashingConf pic.twitter.com/MY5WsR0dmX
— Marko Dugonjić (@markodugonjic) April 17, 2019 -
Oh my gosh I did not know there was a changes panel in Firefox dev tools that tracked the changes you make in inspector! 😅 that’s amazing! #SmashingConf thanks @jensimmons 🙏
— Mandy Michael @ SmashingConf SF (@Mandy_Kerr) April 17, 2019 -
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 -
About to watch @jensimmons code a layout live that she was just handed by @chriscoyier 😱 #smashingconf pic.twitter.com/FNPW13f1p3
— Mandy Michael @ SmashingConf SF (@Mandy_Kerr) April 17, 2019 -
I’m so excited to watch @jensimmons create this layout in realtime at #SmashingConf pic.twitter.com/FXM9Oq2vcM
— Brent Summers (@BrentSummers) April 17, 2019 -
.@jensimmons is about to live code a picture she just received from @chriscoyier on stage 😱 #SmashingConf pic.twitter.com/mXJGavQd7l
— Marko Dugonjić (@markodugonjic) 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
