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

Manipulando CSS em produção com JS

Avatar for Simone Amorim Simone Amorim
December 16, 2017

Manipulando CSS em produção com JS

Se você já ouviu falar em novas funcionalidades do CSS, como custom properties(variáveis), grid layout e etc. Provavelmente você imaginou que elas afetam apenas o mundo dos estilos, pois é, você está errado! Quando as novas especificações do CSS são combinadas com o Javascript, abrem um poderoso leque de possibilidades no mundo do Front-End.

Avatar for Simone Amorim

Simone Amorim

December 16, 2017
Tweet

More Decks by Simone Amorim

Other Decks in Technology

Transcript

  1. Simone Amorim Mother, WWcode Leader, Organizer of FEMUGPE, Front-End Engineer

    and CSS Evangelist <3 I love running and ride a bike! @samorim02 @simoneas02 simoneas02.github.io
  2. :root { --cor: #000; } .teste-1 { background-color: var(--cor); }

    .teste-2 { background-color: var(--cor); }
  3. .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
  4. .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
  5. .a {grid-area: header;} .b {grid-area: aside;} .c {grid-area: main;} .d

    {grid-area: footer;} .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
  6. 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