CSS GRID and WordPress

WordCamp Pittsburgh September 22nd, 2018 Juan Pablo Gomez

ABOUT ME

Juan Pablo Gómez Web Designer @jupago jupago.com

NYCFC Work

FC Harlem Work

Wordpress work - ArtsEverywhere

Wordpress work - fdr4freedoms

Pure+Applied

Bloc.io

UX/UI Mentor

Talk Structure

1 Why? 2 How? 3 When? 4 Demos

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

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

1995 HTML TABLES

http://park.org/main.html

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

1998 HTML TABLES JAVASCRIPT FLASH CSS

https://web.archive.org/web/20040603181245/http:// www.csszengarden.com:80/?cssfile=027%2F027%2Ecss

All the screens

https://www.flickr.com/photos/lukew/10412585943/in/photostream/

Big Screen

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

Small screen

giphy.com

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” 2010 RESPONSIVE DESIGN Ethan Marcotte – Generate Conf NYC, 2014

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

https://speakerdeck.com/jensimmons/designing-with-grid-generate-nyc

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

1 Why? 2 How? 3 When? 4 Demos!

March 8, 2017 - 0.32%

caniuse.com#feat=css-grid

Three Weeks Later….

March 29, 2017 – 26%

caniuse.com#feat=css-grid

Jen Simmons Tweet

Twitter being twiiter..

October 17th 2017

Edge

October 20, 2017 – 69.53%

caniuse.com#feat=css-grid

February 16, 2018 – 82.8%

caniuse.com#feat=css-grid

April, 2018 – 84.2%

caniuse.com#feat=css-grid

84.16% Today!

caniuse.com#feat=css-grid

84.16% Today!

caniuse.com#feat=css-grid

@supports

rachelandrew.co.uk/css/ cheatsheets/grid-fallbacks

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!

1 Why? 2 How? 3 When? 4 Demos!

Demo time! *fingers crossed

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

@jupago • jupago.com

THANK YOU!!! slides: noti.st/jupago

Juan Pablo Gómez Web Designer Twitter: @jupago jupago.com