Grid 4 Life @ SorocabaCSS

An intro to the CSS Grid Module

Transcript

1. GRID 4 LIFE felipe bernardes sorocabacss 25.03.2017
2. WHOTHEFUCK IS FELIPE?
3. ~ $ whoami felipebernardes http://felipebernardes.github.io #votorantim http://tegra.me 2.5
4. WHATHAFUCK IS GRID?
6. column column column column column column column column column column column column column column column
7. rooooooooooooooooow rooooooooooooooooow rooooooooooooooooow column column column column column column column column column column
8. GRID IS LOVE
9. CSS GRID MODULE … in a nutshell
10. P R O P E R T I E S ...those 99% ones
11. display: grid grid-template-areas: grid-template-rows: grid-template-columns:
12. fr U N I T
13. codepen.io/felipebernardes <3
14. A S M A N H A ou… good practices
15. • você pode usar order • ... é espaço em branco • evite usar grid-auto-flow • prefira usar span <numero> • use minmax(min-content, auto) • use .grid-level-1 > .grid-item • use .grid-container e .grid-item • você pode ter grids dentro de grids • fr unit + column-gap é melhor que % + margin • evite shorthand de grid-template, use -area, -row, -columns
16. COOL! CAN I...
19. WHY THE FUCK IS GRID IMPORTANT?
20. T H E F U T U R E
21. T H E W E B
22. I S
23. N O W
24. "se não nós, quem? se não agora, quando?"
25. V L W bernardes.flp@gmail.com speakerdeck.com/felipebernardes felipebernardes.github.io