Post on 05-Oct-2020
Que tienen en común estas tres imágenes?
19881986 1989
Han existido más tiempo que el web!
https://giphy.com
CSS Grid
Porqué? Cómo?
Cuándo?
1989
website: http://info.cern.ch/hypertext/WWW/TheProject.html foto: https://www.w3.org/People/Berners-Lee/
HTML
HTML
TABLES
JAVASCRIPT
1995
https://www.yahoo.com/tech/rip-internet-explorer-1995-2015-we-knew-ye-all-113889644524.html
HTML
TABLES
JAVASCRIPT
FLASH
1996
1998HTML
TABLES
JAVASCRIPT
FLASH
CSS
https://web.archive.org/web/20040603181245/http://www.csszengarden.com:80/?cssfile=027%2F027%2Ecss
https://www.flickr.com/photos/lukew/10412585943/in/photostream/
http://emkwan.com/post/85723552592/lol-apple-ipad-pro-prototype-spotted-in
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”
We took the lazy part too far…
https://medium.com/@mulegirl/clones-c4753ddebea3
Nos gusto la palabra flojos demasiado…
El World Wide Web tiene tan solo 28 años y lo hemos tenido que diseñar de acuerdo a sus limitaciones
Creamos frameworks como Bootstrap/Foundation para disimular esas limitaciones
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
CSS Grid
Porqué? Cómo?
Cuándo?
www.mozilla.org/en-US/firefox/developer
<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…
.contenedor { display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 200px 100px 40px 120px;
grid-gap: 1em; }
fr = fracción
.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
.contenedor { display: grid;
grid-template-columns: repeat(5, 1fr)
grid-template-rows: repeat(12, 10vw)
grid-gap: 1em; }
repeat
.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
.contenedor { display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
grid-template-rows: repeat(7, 10vw)
grid-gap: 1em; }
auto-fit
minimax
CSS Grid
Porqué? Cómo?
Cuándo?
goo.gl/eVo07V https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid
.contenedor { // code para browsers más viejos aquí }
@supports (display: grid){ .contenedor {
// code para CSS Grid aquí } }
@supports
El World Wide Web tiene tan solo 28 años y lo hemos tenido que diseñar de acuerdo a sus limitaciones
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