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

1. View Slide

2. Dilatação do tempo
   

   View Slide

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
   

   View Slide

4. CSS Layouts ontem?
   
   
   
   O que fez a cabeça da moçada <3
   .box {
   display: inline-block;
   }
   .box {
   float: left;
   }
   .container {
   display: flex;
   }
   

   View Slide

5. Grid Layout?
   

   View Slide

6. NO
   Biblioteca / framework?
   CSS
   Grid Layout
   Bootstrap,
   etc…
   

   View Slide

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/
   

   View Slide

8. FlexBox?
   Layouts unidimensionais
   w3.org/TR/css-flexbox-1/
   

   View Slide

9. Grid Layout?
   w3.org/TR/css3-grid-layout/
   Layouts bidimensionais
   

   View Slide

10. Terminologia
    

    View Slide

11. Grid Lines
    As linhas que dividem o grid.
    

    View Slide

12. Grid Track
    É o termo genérico para o espaço entre
    duas grid lines, verticais ou horizontais.
    

    View Slide

13. Grid Cells
    Também conhecida como grid item.
    É o espaçamento entre duas line grids verticais
    e duas horizontais.
    

    View Slide

14. Grid Area
    Um ou mais grid items (grid cells)
    

    View Slide

15. Manda code
    http://codepen.io/simoneas02/pen/KWayPV
    

    View Slide

16. 
    A
    B
    C
    D
    E
    F
    
    HTML básico
    

    View Slide

17. Definindo um Grid
    

    View Slide

18. .container {
    display: grid;
    }
    .container {
    display: inline-grid;
    }
    

    View Slide

19. Line-base placement
    

    View Slide

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
    

    View Slide

21. Line-base positioning
    

    View Slide

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
    

    View Slide

23. Line-base positioning
    Shorthands
    

    View Slide

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
    

    View Slide

25. Grid Gap
    

    View Slide

26. …
    …
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    …
    …
    grid-gap: 10px;
    

    View Slide

27. Area naming
    

    View Slide

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;}
    

    View Slide

29. Responsive Web Design
    

    View Slide

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
    

    View Slide

31. Live Coding
    Refatorando Facebook com Grid Layout
    

    View Slide

32. Muito, tipo muito Mais
    

    View Slide

33. Parcial / prefixo -ms
    Suportado
    caniuse.com/#feat=css-grid
    Qual o suporte?
    

    View Slide

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
    

    View Slide

35. bit.ly/aprendendo-grid-layout
    

    View Slide

36. Obrigada!
    @samorim02
    @simoneas02
    simoneas02.github.io
    

    View Slide