Tweet
Tweet

Slide 1

Slide 1 text

Aplicações Customizáveis com CSS Variables Nicolle Cysneiros

Slide 2

Slide 2 text

Quem sou eu? Fullstack Developer @ Labcodes Django AngularJS HTML e CSS PUG-PE PyLadies Recife

Slide 3

Slide 3 text

Labcodes Estúdio de Software de Recife para o mundo Tecnologias trabalhadas Labcodes e a comunidade

Slide 4

Slide 4 text

Roteiro Aplicações Customizáveis Motivação e Exemplos Abordagem usando SASS CSS Variables Abordagem usando CSS Variables

Slide 5

Slide 5 text

Aplicações Customizáveis

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Aplicações Customizáveis MOTIVAÇÃO Software as a Service (SaaS) White-Labels Experiência do Usuário

Slide 8

Slide 8 text

Aplicações Customizáveis EXEMPLOS - SMARTER AGENT

Slide 9

Slide 9 text

Aplicações Customizáveis EXEMPLOS - NAORA

Slide 10

Slide 10 text

Como deixar o estilo customizável?

Slide 11

Slide 11 text

Usando SASS Preprocessador CSS Inclui novas features Variáveis Aninhamento Mixins e Herança Operadores e Funções Auxiliares

Slide 12

Slide 12 text

$base-color: #ce0149; $highlight-color: #cdafff; p { color: $base-color; } h1, h2, h3 { color: $base-color; } span { color: $highlight-color; } a { color: $highlight-color; }

Slide 13

Slide 13 text

Usando SASS É necessário compilar Variáveis estáticas sass input.scss output.css

Slide 14

Slide 14 text

CSS Variables

Slide 15

Slide 15 text

CSS Variables Implementação nativa de variáveis em CSS Pode ser utilizado em todas as propriedades Seguem as regras em cascata

Slide 16

Slide 16 text

:root { --base-color: #266de0; --highlight-color: #ef33cf; } p { color: var(--base-color); } span { color: var(--highlight-color); } a { color: var(--highlight-color); } .text { --highlight-color: #ebef32; }

Slide 17

Slide 17 text

CSS Variables

Hello World

Lorem ipsum …ultricies nunc…

Link

Created in 29/09/2017

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

CSS Variables Função var permite a configuração de um valor default Função calc permite fazer operações com as variáveis color: var(--base-color, #ffffff); --gap: 10px; padding:calc(var(--gap) + 5px);

Slide 20

Slide 20 text

CSS Variables TRABALHANDO COM JS Podemos modificar dinamicamente o valor das variáveis usando Javascript document.documentElement.style.setProperty('--base-color', ‘#000000');

Slide 21

Slide 21 text

Exemplo de Aplicação Disponível em: custom-blog-theming.herokuapp.com username: john_snow password: john1234 Código-fonte disponível em: https://github.com/nicysneiros/custom-blog-theming.git

Slide 22

Slide 22 text

SASS ou CSS Variables? SASS não permite modificação dinâmica de variável com JS Porém possui outras features além de variáveis Aninhamento, herança e mixins ajudam a organizar projetos grandes

Slide 23

Slide 23 text

SASS ou CSS Variables?

Slide 24

Slide 24 text

SASS ou CSS Variables? SASS + CSS Variables? Aninhamento, heranças e mixis em conjunto com variáveis dinâmicas Funções auxiliares de SASS não funcionam com CSS variables como parâmetro Compatibilidade de browsers ainda é limitada

Slide 25

Slide 25 text

Dúvidas? www.labcodes.com.br speakerdeck.com/labcodes github.com/nicysneiros twitter.com/nicysneiros

Slide 26

Slide 26 text

No content