wordcamp méxico 2017...wordcamp méxico 2017 g r i d juan pablo gómez @jupago jupago.com que...
TRANSCRIPT
![Page 2: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/2.jpg)
Que tienen en común estas tres imágenes?
19881986 1989
Han existido más tiempo que el web!
![Page 3: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/3.jpg)
https://giphy.com
![Page 4: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/4.jpg)
CSS Grid
Porqué? Cómo?
Cuándo?
![Page 5: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/5.jpg)
1989
website: http://info.cern.ch/hypertext/WWW/TheProject.html foto: https://www.w3.org/People/Berners-Lee/
HTML
![Page 7: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/7.jpg)
HTML
TABLES
JAVASCRIPT
1995
https://www.yahoo.com/tech/rip-internet-explorer-1995-2015-we-knew-ye-all-113889644524.html
![Page 8: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/8.jpg)
HTML
TABLES
JAVASCRIPT
FLASH
1996
![Page 9: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/9.jpg)
1998HTML
TABLES
JAVASCRIPT
FLASH
CSS
https://web.archive.org/web/20040603181245/http://www.csszengarden.com:80/?cssfile=027%2F027%2Ecss
![Page 10: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/10.jpg)
https://www.flickr.com/photos/lukew/10412585943/in/photostream/
![Page 11: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/11.jpg)
http://emkwan.com/post/85723552592/lol-apple-ipad-pro-prototype-spotted-in
![Page 12: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/12.jpg)
2010RESPONSIVE DESIGN
https://www.youtube.com/watch?v=u8tpNaaEXQg
“We should look for opportunities to be just a little lazy”Ethan Marcotte – Generate Conf NYC, 2014
“Debemos buscar oportunidades para ser un poquito más flojos”
![Page 13: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/13.jpg)
We took the lazy part too far…
https://medium.com/@mulegirl/clones-c4753ddebea3
Nos gusto la palabra flojos demasiado…
![Page 14: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/14.jpg)
El World Wide Web tiene tan solo 28 años y lo hemos tenido que diseñar de acuerdo a sus limitaciones
![Page 15: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/15.jpg)
Creamos frameworks como Bootstrap/Foundation para disimular esas limitaciones
![Page 16: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/16.jpg)
CSS Grid no las disimula. Las elimina
“This new CSS revolutionizes web page layout” “Este nuevo CSS revoluciona el diseño de nuestras páginas web”
Jen Simmons on CSS Grid – Generate Conf NYC, 2016https://speakerdeck.com/jensimmons/designing-with-grid-generate-nyc
![Page 17: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/17.jpg)
![Page 18: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/18.jpg)
CSS Grid
Porqué? Cómo?
Cuándo?
![Page 19: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/19.jpg)
www.mozilla.org/en-US/firefox/developer
![Page 20: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/20.jpg)
<div class="contenedor"> <div class="uno"></div> <div class="dos"></div> <div class="tres"></div> <div class=“cuatro"></div> <div class=“cinco"></div> <div class="seis"></div>
</div>
.uno { background: red;}
.dos { background: blue;}
.tres { background: yellow;}
.cuat…
![Page 21: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/21.jpg)
.contenedor { display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 200px 100px 40px 120px;
grid-gap: 1em; }
fr = fracción
![Page 22: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/22.jpg)
.contenedor { display: grid;
grid-template-columns: 60vw 100px 1fr;
grid-template-rows: 200px 100px 120px;
grid-gap: 1em; }
.dos { grid-row: span 2; }
.seis { grid-column: span 3; }
span
![Page 23: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/23.jpg)
.contenedor { display: grid;
grid-template-columns: repeat(5, 1fr)
grid-template-rows: repeat(12, 10vw)
grid-gap: 1em; }
repeat
![Page 24: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/24.jpg)
.contenedor { display: grid;
grid-template-columns: repeat(5, 1fr)
grid-template-rows: repeat(12, 10vw)
grid-gap: 1em; }
.uno { grid-column: 2 / 4; grid-row: 1 / 3; }
.dos { grid-column: 3 / 5; grid-row: 2 / 6; }
.tres { grid-row: 4 / 5; grid-column: 1 / 4; }
1 2 3 4 5 6
1
2
3
4
5
6
7
8
9
10
![Page 25: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/25.jpg)
.contenedor { display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
grid-template-rows: repeat(7, 10vw)
grid-gap: 1em; }
auto-fit
minimax
![Page 26: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/26.jpg)
CSS Grid
Porqué? Cómo?
Cuándo?
![Page 29: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/29.jpg)
![Page 30: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/30.jpg)
goo.gl/eVo07V https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid
![Page 31: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/31.jpg)
.contenedor { // code para browsers más viejos aquí }
@supports (display: grid){ .contenedor {
// code para CSS Grid aquí } }
@supports
![Page 32: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/32.jpg)
El World Wide Web tiene tan solo 28 años y lo hemos tenido que diseñar de acuerdo a sus limitaciones
![Page 33: WordCamp México 2017...WordCamp México 2017 G R I D Juan Pablo Gómez @jupago jupago.com Que tienen en común estas tres imágenes? 1986 1988 1989 Han existido más tiempo que el](https://reader034.vdocuments.pub/reader034/viewer/2022051410/602f302042ace6090a61f5b0/html5/thumbnails/33.jpg)
Donde puedo aprender más?
Ellas dos son responsables de el 98% de CSS Grid que he aprendido
@jensimmons labs.jensimmons.com thewebahead.net
@rachelandrew rachelandrew.co.uk/ thecssworkshop.com
The Grid Spec https://www.w3.org/TR/css-grid-1/
Mozilla Developer Network https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout !
• CSS Layout News: • CSS Weekly: • Responsive Design Weekly • Web Platform Daily • CSS Working Group Twitter @csswg