CSS GRID AND WORDPRESS

Slide 1

CSS GRID and WordPress

WordCamp Pittsburgh September 22nd, 2018 Juan Pablo Gomez

Slide 2

ABOUT ME

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

Slide 3

NYCFC Work

Slide 4

FC Harlem Work

Slide 5

Wordpress work - ArtsEverywhere

Slide 6

Wordpress work - fdr4freedoms

Pure+Applied

Slide 7

Bloc.io

UX/UI Mentor

Slide 8

Talk Structure

1 Why? 2 How? 3 When? 4 Demos

Slide 9

What do these 3 photos have in common

They are older than the web

Slide 10

me IRL

Slide 11

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

Slide 12

1989 HTML

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

Slide 13

1995 HTML TABLES

http://park.org/main.html

Slide 14

1995 HTML TABLES JAVASCRIPT

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

Slide 15

1996 HTML TABLES JAVASCRIPT FLASH

Slide 16

1998 HTML TABLES JAVASCRIPT FLASH CSS

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

Slide 17

All the screens

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

Slide 18

Big Screen

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

Slide 19

Small screen

giphy.com

Slide 20

Hacking

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

Slide 21

“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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

“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

Slide 27

Slide 28

CSS Grid - How?

1 Why? 2 How? 3 When? 4 Demos

Slide 29

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

Slide 30

Basic Structure

Slide 31

A simple grid

Slide 32

A fixed cell

Slide 33

Repeating cells

Slide 34

Explicit vs Implicit

Slide 35

Responsiveness like a boss

Slide 36

Template areas

Slide 37

CSS Grid – How

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

Slide 38

March 8, 2017 - 0.32%

caniuse.com#feat=css-grid

Slide 39

Three Weeks Later….

Slide 40

March 29, 2017 – 26%

caniuse.com#feat=css-grid

Slide 41

Jen Simmons Tweet

Twitter being twiiter..

Slide 42

October 17th 2017

Edge

Slide 43

October 20, 2017 – 69.53%

caniuse.com#feat=css-grid

Slide 44

February 16, 2018 – 82.8%

caniuse.com#feat=css-grid

Slide 45

April, 2018 – 84.2%

caniuse.com#feat=css-grid

Slide 46

84.16% Today!

caniuse.com#feat=css-grid

Slide 47

84.16% Today!

caniuse.com#feat=css-grid

Slide 48

@supports

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

Slide 49

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/