Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Acelerando o tempo com CSS Grid Layout e senna.js

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!

Simone Amorim

March 17, 2017
Tweet

More Decks by Simone Amorim

Other Decks in Technology

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