CPS Vitrine Inova Templates

Conjunto de templates de layout aplicando o CPS Design System à interface da Vitrine Inova.

Demonstração: https://cpsrepositorio.github.io/cps-vitrine-inova-templates/

Introdução

Este repositório contém exemplos de layout em aderência ao CPS Design System, pensados para o fluxo básico de pesquisa e visualização de projetos através da Vitrine Inova.

A premissa básica de sua construção foi se ater às tecnologias fundamentais da Web, ou seja, disponibilizar assets HTML, CSS e JavaScript nativos, sem dependências a frameworks ou ferramentas específicas.

Utilizando

O ferramental utilizado durante o desenvolvimento não gera qualquer implicação na utilização final destes templates, por equipes que queiram integrá-los com qualquer tecnologia desejada. Os arquivos empacotados são simplesmente HTML, CSS e JavaScript nativos, sem dependências a frameworks ou ferramentas específicas.

Basta acessá-los em dist, consultar os códigos e copiar as partes que interessarem para dentro dos templates/layouts do framework que estiver sendo utilizado. Desde que a mesma estrutura HTML e CSS seja mantida, os layouts funcionarão automaticamente.

Desenvolvendo

Apesar da premissa de utilização de tecnologias puras nativas da Web, experiência de desenvolvedor (developer experience, ou simplesmente DX) foi valorizada, através da utilização de ferramental baseado em Node com o gerenciador de pacotes Yarn, em especial através do bundler Parcel.

Sendo assim, para colaborar com o desenvolvimento destes templates, é necessário preparar um ambiente com a instalação prévia do Node e do Yarn. Em seguida, executar em um terminal a partir do diretório raiz deste projeto.

# Instalar todas as dependências.
yarn

# Executar em modo de desenvolvimento.
yarn dev

Uma versão de desenvolvimento da aplicação será disponibilizada em http://localhost:1234. Em seguida, basta realizar alterações nos arquivos dentro do diretório src, enquanto o servidor de desenvolvimento permanece em execução.

Publicando

Após realizar atualizações nos arquivos-fonte do projeto, é possível se respaldar em alguns comandos preparados para publicação deste projeto.

# Testar a compilação de produção, porém localmente.
yarn start

# Atualizar a versão preview disponível no GitHub Pages.
yarn deploy

# Gerar uma nova distribuição na pasta `dist`.
yarn publish

Após gerar uma nova distribuição em dist, basta enviar um commit com esta nova versão para o branch master deste repositório no GitHub.