Temas para o Portal Padrao do Governo Federal
Project description
Introdução
Este pacote provê quatro temas (Diazo) modelo do Governo Federal para uso em sites Plone do Governo da República Federativa do Brasil.
O desenvolvimento deste pacote foi feito como parte da iniciativa Portal Padrão da comunidade PloneGov.Br.
Temas
Tema Verde
Tema Azul
Tema Amarelo
Tema Branco
Estado deste pacote
O brasil.gov.temas conta testes automatizados e, a cada alteração em seu código os testes são executados pelo serviço Travis.
O estado atual dos testes, a cobertura de código e o número de downloads deste pacote podem ser vistos nas imagens a seguir:
Instalação
Para habilitar a instalação deste produto em um ambiente que utilize o buildout:
Editar o arquivo buildout.cfg (ou outro arquivo de configuração) e adicionar o pacote brasil.gov.temas à lista de eggs da instalação:
[buildout]
...
eggs =
brasil.gov.temas
Após alterar o arquivo de configuração é necessário executar ‘’bin/buildout’’, que atualizará sua instalação.
Reinicie o Plone
Acesse o painel de controle e na opção Temas você verá os temas providos por este pacote listados.
Desenvolvimento
Passo a passo
Abrir um terminal, entrar na pasta do projeto, rodar buildout e iniciar a instancia;
Abrir outro terminal, entrar na pasta do projeto, iniciar o comando bin/watch-brasilgovtemas;
Alterar os arquivos na pasta webpack.
Mais detalhes
Utilizamos webpack para gerenciar o conteúdo estático do tema, tomando vantagem das diversas ferramentas e plugins disponíveis para suprir nossas necessidades.
Utilizamos a receita de buildout sc.recipe.staticresources para integrar o webpack no Plone.
Ao desenvolver os temas iniciamos o watcher do webpack e trabalhamos somente na pasta “webpack” alterando os arquivos; o webpack se encarrega de processar e gerar os arquivos em seu endereço final.
Segue uma lista dos principais arquivos:
$ tree webpack/app
webpack/app
├── brasilgovtemas.js
├── index.html
├── padrao
│ ├── brasilgovtemas.scss
│ ├── img
│ │ └── sprite.png
│ ├── manifest.cfg
│ ├── preview.png
│ ├── sprite
│ │ ├── botao-busca.png
│ │ ├── busca.png
│ │ ├── casinha.png
│ │ ├── contraste.png
│ │ ├── nav.png
│ │ └── vlibras.png
│ └── _sprite.scss
├── rules.xml
└── scss
├── _basic.scss
├── _footer.scss
├── _grid.scss
├── _header.scss
├── _portlets.scss
├── _responsive.scss
└── _tiles.scss
Foi adotada a estratégia pouco comum ao Plone de não registrar os arquivos CSS e JS no portal_css e portal_javascripts; Ao invés disso, deixamos o trabalho de gerar um novo nome desses arquivos para o webpack.
O arquivo index.html da pasta do Diazo não está no controlador de versões. Ao invés disso, existe um index.html na pasta “webpack” que é processado a cada execução do buildout ou do webpack, e gera arquivos JS, CSS e index.html na pasta do Diazo. Os arquivos JS e CSS possuem nomes especiais com um hash que é renovados a cada execução do buildout.
O arquivo rules.xml é copiado para cada tema, e a princípio é igual para todos os temas.
Existe um arquivo brasilgovtemas.scss para cada tema; nele existem definições de variáveis do que muda em cada tema, fontes, tamanhos e cores, e importa os arquivos da pasta “scss” para processar cada tema. Esse arquivo é transformado em brasilgovtemas-[hash].css após processamento.
O arquivo brasilgovtemas.js é escrito em ES6 e, ao processar, cria um arquivo brasilgovtemas-[hash].js transformado em ES5 através do compilador Babel, e é criada uma cópia por tema desse arquivo.
Foi adicionado um plugin para remover os arquivos antigos gerados com hash, para não acumular arquivos CSS e JS na pasta.
Na pasta “scss” existem os arquivos de estilos propriamente dito, é la que devemos alterar alguma estrutura de CSS compartilhada por todos os temas, e uma alteração nessa pasta repercurte em alteração me todos os temas após execução do webpack.
Existem ainda os arquivos manifest.cfg e preview.png que são únicos para cada tema, e são necessários pelo Diazo.
Cada tema ainda possui uma pasta “sprite”, onde são adicionados os ícones utilizados no tema. Esses ícones são processados gerando os arquivos _sprite.scss e img/sprite.png no tema. O primeiro arquivo cria mixins utilizados no tema para facilitar a inserção de regras do sprite, e o segundo arquivo é o sprite propriamente dito, que junta todas as imagens existens na pasta “sprite”.
Este pacote adiciona os seguintes comandos na pasta bin do buildout para processar automaticamente os recursos estáticos:
$ bin/env-brasilgovtemas
Este comando adiciona no terminal o node do buildout no PATH do sistema, dessa forma voce pode trabalhar com webpack conforme a documentação oficial.
$ bin/watch-brasilgovtemas
Este comando instrui ao Webpack para esperar por qualquer mudança nos arquivos SASS e gera a versão minificada do CSS para a aplicação.
$ bin/dev-brasilgovtemas
Este comando faz o mesmo que o comando watch, mas não minifica o CSS final. Utilizado para debugar a geração do CSS.
$ bin/build-brasilgovtemas
Este comando cria o CSS minificado, mas não espera por mudanças.
Links de línguas no topo (Internacionalização)
Hoje nos arquivos CSS existem regras para mostrar links de línguas, como as classes language-en e language-es. Para adicionar links dessas línguas sem precisar customizar o tema, adicione em site_actions actions com esse mesmo id e as regras do Diazo pegarão os links renderizados das actions posicionando corretamente na lista de línguas no tema.
Contribuidores
O brasil.gov.temas não seria possível sem a contribuição das seguintes pessoas:
André Nogueira
Carlos Vieira
Danilo Barbato
Érico Andrei
Héctor Velarde
Igor Prado
Felipe Duardo
Rennan Rodrigues
Rodrigo Ferreira de Souza
Tânia Andrea
Para comunicar problemas e sugerir melhorias, abra um ticket no repositório deste pacote.
Changelog
2.0a1 (2017-12-27)
Release inicial. [agnogueira, rodfersou, hvelarde]
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.