Criando componentes React com o
CONSTRAINT-BASED DESIGN
ADRIEN DENAT
FRONTEND DEVELOPER
"constraint-based design"? 🤔
Você provalvamente já usa!
constraint-based UI development
desenvolvimento de UI baseado em restrições
Você já segue regras
As propriedades aplicáveis nos componentes não tem limites.
O desenho reduz elas em um grupo
de valores aceitáveis.
The properties of components are infinite.
The design reduces them in a set of acceptable values.
As regras são difíceis de seguir
Inconsistências nas interfaces
magic values 🎩
Como acontecem inconsistências?
Criação de novos componentes sem design (workflow shortcircuit)
Erros em efeito cascata do design inicial
Tecnologia diferente da implementação inicial
Como simplificar o processo de criação de componentes seguindo esse principio?
theme.js
Component
Design
Theme.js?
O arquivo de tema contém os valores de style, scales, e/ou design tokens
Design Token? 🤔
Bootstrap
Design Tokens
Entities nomeadas que armazenam atributos de design
Named entities that store visual design attributes
Como criar o tema?
Tem spec!
System UI
system-ui.com
const theme = {
breakpoints: ["40em", "66em", "74em"],
colors: {
body: "#2F2F2F",
heading: "#000000",
background: "#FFFFFF",
primary: "#1739E6",
secondary: "#30c",
muted: "#f6f6f9",
gray: "#dadada",
},
fonts: {
body: "'Montserrat', system-ui, sans-serif",
heading: "inherit",
monospace: "Menlo, monospace",
},
fontSizes: {
0: "1rem", // 10px
1: "1.2rem", // 12px
2: "1.5rem", // 15px
3: "1.7rem", // 17px
4: "1.9rem", // 19px
5: "2.3rem", // 23px
6: "2.8rem", // 28px
7: "3.8rem", // 38px
8: "4.8rem", // 48px
9: "7rem", // 70px
10: "9rem", // 90px
},
fontWeights: {
body: 400,
heading: 400,
bold: 600,
extraBold: 700,
},
lineHeights: {
body: 1.7,
heading: 1.25,
},
space: [0, 5, 10, 15, 25, 40, 80, 120, 200],
sizes: {
avatar: 48,
},
radii: {
default: 4,
card: 19,
circle: 99999,
},
shadows: {
card: "0 9px 30px rgba(0,0,0,.1)",
button: "0px 2px 2px rgba(0,0,0,0.1)",
},
}
theme.space.gridGap = {
small: theme.space[3],
large: theme.space[4],
}
theme.space.pageWrap = {
small: theme.space[3],
large: theme.space[4],
}
theme.fontSizes.body = theme.fontSizes[2]
export default theme
Zeplin
zeplin.io
theme.js
Component
Design
Algumas soluções existentes:
Atomic CSS
Tachyons
Basscss
Tailwindcss
Tailwindcss
Utility classes primitivos
Tailwindcss 👍
Configurável
Não precisa mais inventar nomes para classes
Adeus "magic values"
O CSS fica do mesmo tamanho, não crece mais
Mais flexível e composable
theme.js
(tailwind.config.js)
package.json
output.css
Precisa lembrar o nome das classes do framework
Tailwindcss 👎
Stylesheet gerada é estática
Não é React
E com React?
Styled-System
styled-system.com
Criar componentes com props baseadas nos scales definidos no tema.
components/Box.js
App.js
App.js
components/GridCol.js
Definir a API de estilo dos componentes (styling restrito)
Styled System 👍
Criar propriedades customizadas theme-aware
Poor discoverability: o desenvolvedor tem que aprender a API dos componentes criados
Styled System 👎
Melhor para design systems e libraries de componentes. Poderoso demais para um site simples
Theme UI
theme-ui.com
"theme-first" styling
theme.js
App.js
Pode estilizar qualquer componente
Theme UI 🎉
Accesso a todas as propriedades CSS sem limitações
Menos coisas para aprender e lembrar
xstyled
smooth-code.com/open-source/xstyled
const Button = styled.a`
/* This renders the buttons above... Edit me! */
border: 2; /* ⟶ 2px solid */
color: white; /* ⟶ theme.colors.white */
border-color: primary; /* ⟶ theme.colors.primary */
border-radius: medium; /* ⟶ theme.radii.medium */
padding: 8 24; /* ⟶ theme.space.* */
margin: 48 8; /* ⟶ theme.space.* */
background-color: primary; /* ⟶ theme.colors.primary */
display: inline-block;
transition: background-color 300ms, color 300ms;
&:hover {
color: white;
background-color: primaryLight;
}
`
const theme = {
colors: {
primary: 'palevioletred',
primaryLight: 'pink',
secondary: 'gray'
},
radii: {
medium: 3,
}
}
Controle os estilos autorizados (forçar o uso do tema)
No futuro
Standard Theme Specification para uniformizar o uso do arquivo do tema entre as plataformas
Merci :)
Questions ?
- Gatsby: framework de criação de site com React
- Theme UI
- Exemplo de projeto real com Theme UI (meu portfolio adriendenat.com) https://github.com/Grsmto/grsmto.github.io
Ressources
Criando componentes React com o "constraint-based design"
By Adrien Denat
Criando componentes React com o "constraint-based design"
- 875