Construindo um sistema de tipografia React

Jez Williams Blocked Unblock Seguir Seguindo 25 de dezembro de 2018

Meu objetivo é criar um sistema de tipografia React sólido e flexível que seja escalável.

Abaixo está uma coleção de ferramentas e convenções juntas para formar um sistema de design que é fácil de usar e escalável.

Este é um detalhamento do processo, exemplos e como implementá-lo.

O objetivo

Eu amo sistemas de design. É provavelmente o meu lado alemão que tem uma sensação de calor quando trabalha com um sistema de design sólido e as coisas simplesmente funcionam. Anteriormente, soluções como Atomic Design Patterns e ITCSS funcionavam bem, mas dependiam da natureza em cascata do CSS global. Agora que a web passou para componentes modulares mais isolados, eu queria criar uma solução que ainda tivesse a flexibilidade que tínhamos com as boas e antigas classes CSS.

Estes foram meus principais requisitos:

  • Estilos extensíveis: Capacidade de substituir os estilos padrão usando adereços.
  • Marcação flexível: capacidade de alterar o elemento HTML dos componentes.

Além disso, a solução final deve ser simples, escalável e seca.

Começando

Quando enfrento desafios como esse, muitas vezes começo com o objetivo final ideal e faço engenharia reversa. Então, em minha mente, eu gostaria de algo assim:

O exemplo acima satisfaria os dois requisitos principais. É um componente estilizado que tem flexibilidade para ser modificado visual e semanticamente. Embora o exemplo acima seja bastante trivial, há algumas alterações que quero refatorar para melhorar a convenção de nomenclatura e abstrair os nomes do contexto de onde ela é usada.

Boas práticas

Esta breve seção é sobre as convenções que usei para exemplos na solução final, sinta-se à vontade para pular isto se você já estiver familiarizado com os sistemas de design.

Em primeiro lugar, nomes de tipografia. Eu usei várias convenções para denominar estilos de tipo, de nomes de planeta a cidades, mas a melhor solução que eu encontrei é aquela usada no GEL , a estrutura de front end feita pela BBC que referencia técnicas tradicionais de medição datando de o 15o século.

http://www.bbc.co.uk/gel/guidelines/typography

Isso nos ajuda a comunicar facilmente as opções de tipos no processo de desenvolvimento, colmatando a lacuna entre designers e desenvolvedores.

Em segundo lugar, em relação aos nomes das cores, eu geralmente uso o nome dessa cor para criar nomes abstratos individuais. Isso evita acabar com listas de variações numeradas da mesma cor (cinza-1, cinza-2) … todos nós já estivemos lá.

Então, depois de aplicar essas alterações, o primeiro exemplo ficaria assim:

Agora, para o próximo desafio, estilos extensíveis…

Estendendo estilos de componentes padrão

Para satisfazer o primeiro requisito dos critérios, eu precisava de uma maneira de transformar cada um dos estilos de tipografia (Canon, BodyCopy, etc.) em componentes com estilos padrão, mas também pode substituí-los usando props.

Anteriormente, eu abordei isso incluindo todos os estilos padrão, adereços e marcações em cada componente individual (veja abaixo). No entanto, isso tornou as modificações muito limitadas e obrigou você a usar o elemento HTML codificado (neste caso, H1).

Além disso, essa abordagem também não se ajustou bem e rapidamente levou a componentes e prop bloat, uma vez que adicionei mais estilos e modificações.

Depois de criar e tentar várias outras soluções possíveis, me deparei com o pacote de sistema estilizado Brent Jackson.

jxnblk / styled-system
sparkles: adereços de estilo responsivo e baseados em temas para a construção de sistemas de design com o React – jxnblk / styled-system github.com

Usando o estilo de sistema, consegui refatorar o componente da Canon para obter o seguinte:

  • remova os suportes manuais para modificações
  • mover os estilos padrão para o ThemeProvider

Então, primeiro eu substituo os adereços definidos manualmente. O Styled-System usa o conceito de funções de estilo para fornecer a você um conjunto de utilitários que mapeiam adereços ao seu componente. Então, depois de aplicá-las a partir do sistema de estilo, o exemplo anterior ficaria assim:

Eu tenho usado componentes com estilo, mas o sistema com estilo também pode trabalhar com outras CSS em bibliotecas JS.

Especificando funções estilizadas com sistema de estilo, consegui obter a mesma funcionalidade de antes e também substituir os estilos padrão, como o tamanho da fonte e a cor usando adereços.

Etapa dois, movendo os estilos padrão dos componentes individuais para o provedor React compartilhado. O sistema com estilo na verdade aproveita o ThemeProvider usado pelos componentes com estilo e, usando a convenção de nomenclatura de sistema com estilo, você pode fazer referência a valores sem qualquer lógica adicional.

O código abaixo é a variável de tema que será passada para o ThemeProvider. O objeto textStyles é onde eu movi todos os estilos padrão que eu tinha no componente original.

Para tornar esses estilos propriedades responsivas, como fontSize e lineHeight também aceitam uma matriz na qual os valores correspondem à matriz fontSizes no objeto raiz e a posição na matriz corresponde aos valores de largura mínima na matriz de breakpoints .

Os textStyles agora podem ser referenciados e aplicados a elementos JSX para que seus estilos sejam aplicados a ele.

No entanto, para tornar esses componentes de texto mais fáceis de importar, criei um único arquivo de manifesto que exporta todos os componentes de texto com os estilos e suportes padrão passados.

Estilos de texto agora podem ser importados e ter estilos sobrepostos como este:

Por fim, para o requisito final, também precisei poder substituir a marcação de cada elemento também.

Marcação flexível

Para qualquer sistema de design, é importante não ter os estilos de tipografia vinculados a um elemento. Por exemplo, você não deve ser forçado a usar um H1 sempre que precisar de um estilo de cabeçalho. A marcação semântica deve ser apenas para navegadores ou mecanismos de pesquisa. E estilo usado para fins visuais.

Para obter essa flexibilidade, criei um componente de ordem superior para lidar com todas as substituições de estilo e marcação.

Este DynamicComponent usará o withComponent método de styledComponents para o padrão de qualquer elemento de uma div e substituí-lo com qualquer elemento passado para a tag prop.

Cada componente de tipografia compartilhará esse DynamicComponent . Portanto, podemos mover os elementos do sistema estilizado de cada um dos componentes de tipografia para o componente DynamicComponent mantendo os componentes DRY.

Então, o DynamicComponent completo com todos os suportes do sistema estilizado agora terá a seguinte aparência:

Isso agora significa que cada um dos componentes da tipografia pode agora usar o DynamicComponent compartilhado. O elemento HTML padrão usado ao importar qualquer componente de texto é definido no objeto de tema com a chave de tag.

./theme.js

Este é o arquivo de manifesto final da tipografia e está exportando 2 estilos de tipografia, Canon e Trafalgar.

./Typography/index.js

É isso aí, tipo

Então, finalmente, isso agora é possível: marcação e estilos dinâmicos.

Incluí mais exemplos em codesandbox e também no meu site:

Jez Williams | desenvolvedor web freelance de front end
Portfólio Jez Williams www.jezfx.com

No entanto, existem algumas pequenas limitações que encontrei:

  • O DynamicComponent poderia eventualmente inchar. Porque sempre que algum dos estilos de tipografia exigir um novo suporte, ele teria que ser exportado do sistema com estilo e incluído na lista de adereços.
  • Você também está limitado a apenas estilos suportados pelo sistema com estilo.

Portanto, definitivamente há melhorias a serem feitas, mas descobri que é a mais flexível e fácil de usar até agora. O repo completo está aqui se você quiser experimentá-lo ou escolher ideias para seus próprios projetos.

Jezfx / react-typography-system
Uma coleção de ferramentas e convenções reunidas para formar um sistema de design fácil de usar e escalável. … Github.com

Obrigado pela leitura ?

Eu adoraria ouvir qualquer feedback, pensamentos ou perguntas.

Foto de Amador Loureiro no Unsplash