Baixe o código no Github

kikobr/open-card-sorter

Como personalizar o Web Form?

Basta baixar o código do Github, acessar a pasta card-sorting/web-form/ e modificar algum arquivo css ou javascript.

Para republicar a sua versão do WebForm, é só hospedar essa pasta de forma estática em algum servidor. Uma sugestão gratuita, além do próprio Github, é o Netlify.

São só arquivos estáticos? Não tem nenhum processo de build ou pré-processamento?

São só arquivos estáticos fera, e isso é uma decisão de design.

Essa ferramenta foi projetada para ser acessível a designers. Incluir um processo de build para rodar / modificar os arquivos-fonte seria apenas adicionar mais uma barreira de entrada para um público que não está muito familiarizado com programação.


Tecnologias usadas

Javascript

Vue.js: biblioteca utilizada para gerenciar o estado da aplicação e renderizar os componentes na tela. Foi utilizado carregando arquivos javascript diretamente, para evitar utilização de processos de build complexos

Vddl: Biblioteca para gerenciar e renderizar listas de arrastar e soltar. É o que permite mover os cards entre os grupos e reorganizar os grupos. Utiliza a API de eventos drag-n-drop do HTML, então precisa de um polyfill para funcionar nos celulares.

DragDropTouch: polyfill (tratativa) que implementa os eventos de arrastar e soltar do HTML5 em navagadores mobile que não possuem essa API. Sem ele, não dá pra utilizar drag-n-drop no celular.

CSS

Variáveis CSS: são utilizadas para tornar o código CSS mais reutilizável e escalável. Por exemplo, ao mudar uma variável de cor, você atualiza tudo no site que utiliza essa cor.

⚠️ Essa API do CSS só funciona em navegadores atuais. Ou seja, não vai funcionar no Internet Explorer nem em browsers desatualizados. Se você for disparar o WebForm para uma base de clientes que podem utilizar esses navegadores, será necessário pré-processar o CSS ou criar uma tratativa no site pedindo para trocar de browser. Veja a compatibilidade atual dessa API nos navegadores.