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.

Transcript

1. Manipulando CSS Em produção com JS @simoneas02
2. 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
3. Javascript para Web Front V.S Back
4. Front-End O que dá para fazer? Regras de negócio Offline Consumir dados Rotas Mais…
5. Qual a real finalidade? Por que fazemos isso?
6. Criar interfaces Entre o usuário e a informação
7. Especificamente Vamos focar em CSS e JS
8. O que dá para fazer? Unindo CSS e JS
9. Exemplo
10. Exemplo
11. Como faz? Apenas trocar classes?
12. Podemos ir além! Mas, precisamos conhecer o poder do CSS
13. Variables CSS Custom Properties for Cascading Variables Module Level 1 http://www.w3.org/TR/css-variables/
14. .teste { --cor: #000; --tamanho: 200px; background-color: var(--cor); width: var(--tamanho); }
15. :root { --cor: #000; } .teste-1 { background-color: var(--cor); } .teste-2 { background-color: var(--cor); }
16. Pré-processadores? Não existem em produção!
17. Exemplo
18. Soportado caniuse.com/#feat=css-variables Suporte
19. CSS Grid Layout!
20. <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
21. Definindo um Grid
22. .container { display: grid; } .container { display: inline-grid; }
23. Line-base placement
24. .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
25. Line-base positioning
26. .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
27. Area naming
28. .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
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. bit.ly/aprendendo-grid-layout
32. Soportado caniuse.com/#feat=css-grid Suporte
33. Muito mais! CSS Filters, Blend Modes, etc...
34. Vá além de trocar classes!
35. Com apenas CSS e um pouco de Javascript Demo
36. Obrigada! @simoneas02