Acelerando o tempo com CSS Grid Layout e senna.js

Já estamos no futuro e temos suportado nos browsers uma opção realmente disrruptiva no quesito "criar layouts" com CSS, lhes apresento o seu novo Deus!

Transcript

2. Dilatação do tempo
3. Mother, WWcode Leader and studying for become a Front-End Developer and CSS Evangelist <3 I love running and ride a bike! Simone Amorim @samorim02 @simoneas02 simoneas02.github.io
4. CSS Layouts ontem? <table> <td></td> </table> O que fez a cabeça da moçada <3 .box { display: inline-block; } .box { float: left; } .container { display: flex; }
5. Grid Layout?
6. NO Biblioteca / framework? CSS Grid Layout Bootstrap, etc…
7. Um modulo CSS3 que define um grid otimizado para interfaces CSS Grid Layout CSS Grid Layout Module Level 1 w3.org/TR/css3-grid-layout/
8. FlexBox? Layouts unidimensionais w3.org/TR/css-flexbox-1/
9. Grid Layout? w3.org/TR/css3-grid-layout/ Layouts bidimensionais
10. Terminologia
11. Grid Lines As linhas que dividem o grid.
12. Grid Track É o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.
13. Grid Cells Também conhecida como grid item. É o espaçamento entre duas line grids verticais e duas horizontais.
14. Grid Area Um ou mais grid items (grid cells)
15. Manda code http://codepen.io/simoneas02/pen/KWayPV
16. <div class=“container”> <div class=“a”>A</div> <div class=“b”>B</div> <div class=“c”>C</div> <div class=“d”>D</div> <div class=“e”>E</div> <div class=“f”>F</div> </div> HTML básico
17. Definindo um Grid
18. .container { display: grid; } .container { display: inline-grid; }
19. Line-base placement
20. .container { display: inline-grid; } grid-template-rows: 100px 100px grid-template-columns: 120px 120px 120px; 100px; A B C D E F 1 column 2 column 3 column 2 row 1 row 3 row
21. Line-base positioning
22. .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .f { } grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; B C D A E F
23. Line-base positioning Shorthands
24. .a { } grid-column: 1 / 2; grid-row: 1 / 2; .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .a { } grid-area: 1 / 1 / 2 / 2; B C D A E F
25. Grid Gap
26. … … grid-row-gap: 10px; grid-column-gap: 10px; … … grid-gap: 10px;
27. Area naming
28. .a {grid-area: header;} .b {grid-area: aside;} .c {grid-area: main;} .d {grid-area: content;} .container { display: grid; grid-template-rows: auto; grid-template-columns: auto; grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; } main header content aside footer .e {grid-area: footer;}
29. Responsive Web Design
30. main header content aside footer @media screen and (max-width: 666px) { } … grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; … .container { grid-template-areas: “aside header header” “aside main main” “aside main main” “content footer footer”; } main header content aside footer
31. Live Coding Refatorando Facebook com Grid Layout
32. Muito, tipo muito Mais
33. Parcial / prefixo -ms Suportado caniuse.com/#feat=css-grid Qual o suporte?
34. Quer Saber mais? gridbyexample.com/ css-tricks.com/snippets/css/complete-guide-grid/ codepen.io/collection/njkQQa/ Grid by Example - Rachel Andrew Complete guide - CSS Tricks Codepen Collection - Simone Amorim
35. bit.ly/aprendendo-grid-layout
36. Obrigada! @samorim02 @simoneas02 simoneas02.github.io