CSS GRID AND WORDPRESS

A presentation at WordCamp Pittsburgh in September 2018 in Pittsburgh, PA, USA by Juan Pablo Gomez

CSS GRID and WordPress — CSS GRID and WordPress
WordCamp Pittsburgh September 22nd, 2018 Juan Pablo Gomez

ABOUT ME — ABOUT ME
Juan Pablo Gómez Web Designer @jupago jupago.com

NYCFC Work

FC Harlem Work

Wordpress work - ArtsEverywhere

Wordpress work - fdr4freedoms — Wordpress work - fdr4freedoms
Pure+Applied

Bloc.io — Bloc.io
UX/UI Mentor

Talk Structure — Talk Structure
1 Why? 2 How? 3 When? 4 Demos

What do these 3 photos have in common — What do these 3 photos have in common
They are older than the web

me IRL

http://www.ancient-egypt-online.com/egyptian-music.html https://headsup.boyslife.org/what-was-the-first-movie-ever-made/ https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/ed-sheeran-got-1500309510.png?crop=1.00xw:1.00xh;0,0&resize=768:* https://upload.wikimedia.org/wikipedia/commons/a/a8/Aztec_calendar_%28Sunstone%29.png http://ancientrome.ru/art/artworken/img.htm?id=1372

1989 HTML — 1989 HTML
website: http://info.cern.ch/hypertext/WWW/TheProject.html foto: https://www.w3.org/People/Berners-Lee/

1995 HTML TABLES — 1995 HTML TABLES
http://park.org/main.html

1995 HTML TABLES JAVASCRIPT — 1995 HTML TABLES JAVASCRIPT
https://www.yahoo.com/tech/rip-internet-explorer-1995-2015-we-knew-ye-all-113889644524.html

1996 HTML TABLES JAVASCRIPT FLASH — 1996 HTML TABLES JAVASCRIPT FLASH
1996 HTML TABLES JAVASCRIPT FLASH

1998 HTML TABLES JAVASCRIPT FLASH CSS — 1998 HTML TABLES JAVASCRIPT FLASH CSS
https://web.archive.org/web/20040603181245/http:// www.csszengarden.com:80/?cssfile=027%2F027%2Ecss

All the screens — All the screens
https://www.flickr.com/photos/lukew/10412585943/in/photostream/

Big Screen — Big Screen
http://emkwan.com/post/85723552592/lol-apple-ipad-pro-prototype-spotted-in

Small screen — Small screen
giphy.com

Hacking — Hacking
https://www.reddit.com/r/security/comments/5gzmux/clientside_validation/

“We should look for opportunities to be just a little lazy” — “We should look for opportunities to be just a little lazy”
“We should look for opportunities to be just a little lazy” 2010 RESPONSIVE DESIGN Ethan Marcotte – Generate Conf NYC, 2014

We took the lazy part too far… — We took the lazy part too far…
https://www.reddit.com/r/gifs/comments/4h84qg/be_different_and_youll_always_stand_out/ @jupago • jupago.com

The web is only 29 years old and we’ve had to design websites conforming to its limitations

We build layout frameworks & layout plugins & layout boilerplates to mask those limitations

CSS Grid does not hide this limitations CSS Grid gets rid of them

“This new CSS revolutionizes web page layout” Jen Simmons on CSS Grid – Generate Conf NYC, 2016 — “This new CSS revolutionizes web page layout” Jen Simmons on CSS Grid – Generate Conf NYC, 2016
https://speakerdeck.com/jensimmons/designing-with-grid-generate-nyc

CSS Grid - How? — CSS Grid - How?
1 Why? 2 How? 3 When? 4 Demos

www.mozilla.org/en-US/firefox/developer @jupago • jupago.com

Basic Structure

A simple grid

A fixed cell

Repeating cells

Explicit vs Implicit

Responsiveness like a boss

Template areas

CSS Grid – How — CSS Grid – How
1 Why? 2 How? 3 When? 4 Demos!

March 8, 2017 - 0.32% — March 8, 2017 - 0.32%
caniuse.com#feat=css-grid

Three Weeks Later….

March 29, 2017 – 26% — March 29, 2017 – 26%
caniuse.com#feat=css-grid

Jen Simmons Tweet — Jen Simmons Tweet
Twitter being twiiter..

October 17th 2017 — October 17th 2017
Edge

October 20, 2017 – 69.53% — October 20, 2017 – 69.53%
caniuse.com#feat=css-grid

February 16, 2018 – 82.8% — February 16, 2018 – 82.8%
caniuse.com#feat=css-grid

April, 2018 – 84.2% — April, 2018 – 84.2%
caniuse.com#feat=css-grid

84.16% Today! — 84.16% Today!
caniuse.com#feat=css-grid

84.16% Today! — 84.16% Today!
caniuse.com#feat=css-grid

@supports — @supports
rachelandrew.co.uk/css/ cheatsheets/grid-fallbacks

Where can I learn more — Where can I learn more
@jensimmons @rachelandrew layout.land rachelandrew.co.uk/ labs.jensimmons.com thecssworkshop.com thewebahead.net CSS Layout News *They are responsible for 99% of what I know about CSS Grid Firefox DevTools Playground mozilladevelopers.github.io/playground/ The Grid Spec https://www.w3.org/TR/css-grid-1/

CSS Grid – 4 Demos! — CSS Grid – 4 Demos!
1 Why? 2 How? 3 When? 4 Demos!

Demo time! *fingers crossed

CSS Grid Layout Module Level 2 Coming soon! — CSS Grid Layout Module Level 2 Coming soon!
www.w3.org/TR/css-grid-2/ @jupago • jupago.com

Just a little reminder that it's about 100 times mire important what you build than how you build ir – Chris Coyier — Just a little reminder that it's about 100 times mire important what you build than how you build ir – Chris Coyier
@jupago • jupago.com

THANK YOU!!! slides: noti.st/jupago — THANK YOU!!! slides: noti.st/jupago
Juan Pablo Gómez Web Designer Twitter: @jupago jupago.com

Juan Pablo Gomez
@jupago

1 / 54

CSS Grid was released last year and it changes everything; for the web and for the WordPress Community. It means that for the first time ever we get to think of our layout as two-dimensional and fully responsive. CSS Grid is not another plugin hack or another bootstrap patch, it is the solution designers have been asking for. It is here to stay and right now is the perfect time to learn it!

Buzz and feedback

Here’s what was said about this presentation on social media.

Thanks for the great CSS grid talk @jupago! Made me want to start coding again. #wcpgh
— Stephen Morrissey 🦄 (@sbmorrissey) September 22, 2018
Great job on your talk! I learned a lot!
— Christie Chirinos🤷🏻‍♀️ (@cicichirinos) September 22, 2018
👋 Fellow @wppgh attendees my slides are up at https://t.co/di3ZEKc4IP

Feel free to send me any questions you have. 😊#WCPGH #WordCamp
— Juan Pablo Gomez 🇺🇸🇲🇽 (@jupago) September 22, 2018
Juan Pablo referencing Space Jam website https://t.co/rafteBVPP2 1995... tables! Déjà vu . . . #wcpgh
— kim white (@MrsCRW) September 22, 2018