Brinque com o logo da BrazilJS!

O novo logo BrazilJS é customizável

Se você tem se atualizado com as novidades da BrazilJS, deve ter reparado na mudança de visual tanto em toda a assinatura do portal como em nosso novo logo! Esse novo visual foi um extenso trabalho da Dex01, uma empresa parceira nossa, e também de muito trabalho interno aqui na Nasc :)

Você deve ter reparado também em algumas animações com nosso logo, algumas brincadeiras que preparamos com ele (exibidas logo que a página carrega, por exemplo). Bom, aquele logo está em HTML e é regido por simples classes CSS... Ah... a beleza das tecnologias abertas da Web!

E eis que agora você também pode brincar com nosso logo! Atendendo a inúmeros pedidos, bolamos essa ferramenta aqui para que vocês possam visualizar os diferentes temas, criar suas próprias versões de logo e submetê-las para nosso repositório.

O projeto está no nosso repositório no Github, e a ferramenta com os temas publicados atualmente pode ser acessada diretamente aqui: logos customizados BrazilJS

Criando um novo tema

Faça um clone deste repositório e sirva-o com HTTP (usando algo como Apache, ou o http-server via node). Então, siga estes passos:

1) Adicione seu novo tema no arquivo list-of-themes.js

Seu tema é definido como um objeto com as seguintes propriedades:

name: O nome do tema description: Uma descrição para seu tema className: A classe CSS utilizada em seu tema (será setada no container do logo) background: Uma string a ser usada como background do body da página para visualização na ferramenta author: Adicione aqui uma referência para seu "github-username" ou "@twitterAccount"

2) Crie os arquivos do seu tema

Crie um diretório com o nome do seu tema (o mesmo nome usado como chave no objeto de configuração, descrito no item acima). Dentro desse diretório, crie um arquivo chamado "index.css". Nele, você poderá adicionar alguma imagem, caso seu tema necessite.

3) Customize os elementos

Customize os elementos prefixando suas classes com o "className" que você definiu no objeto de configuração do seu tema no arquivo list-of-themes.js.

4) Envie seu tema

Abra uma Pull Request submetendo seu tema para o projeto principal. Assim que a PR for aceita, seu tema entrará para a lista de temas na ferramenta.

Estrutura

Algumas notas importantes sobre a estrutura HTML:

Ambos "brazil" e "S" são SVGs. Já a letra "J" e sua linha de efeito são HTML puro (DIVs). Você pode brincar a vontade com estes elementos, e também com seus respectivos pseudo-elements (:before e :after). Caso adicione a classe "spin", você verá o logo girando em 3D. Tenha em mente que alguns efeitos 3D ou de gradientes se comportam diferente em SVGs. A font-family usada por padrão é a "Roboto Mono",monospace, caso você esteja usando "content" em algum pseudoelemento. Quando você define um gradiente ou imagem como uma das três variáveis de CSS (descritas abaixo), o controller fica bloqueado para que usuários não possam alterar aquele efeito. Do contrário, usuários poderão alterar a cor daquela variável para seu tema.

Cores

Você pode customizar as cores alterando os valores das seguintes variáveis no CSS:

--color-primary --color-secondary --color-third

Você pode usar, também, strings para "gradientes" ou "image url". Isto é válido também para o background do body no arquivo de configurações (por padrão, o body irá centralizar qualquer imagem de backrgound, e defini-la como "cover").

IMPORTANTE: Quando usar cores que não sejam efeitos de gradiente nem URLs para imagens, sempre use valores válidos para RGB ou HEX para as cores, e não use a versão "curta" para definição em hexadecimal (por exemplo, use "#ff9900" no lugar de "#f90"). Nós usaremos estes valores nos campos de "color picker", que são elementos HTML do tipo "color" que não aceitam estes formatos abreviados.

Transições

Todos os elementos vão animar qualquer alteração que sofrerem, por padrão, utilizando as CSS Transitions. Sinta-se à vontade para customizar as animações, mas certifique-se de que elas estão sempre sob a definição da classe de seu tema.

Contribuições

Ao submeter um novo tema, você está nos dando permissões para exibi-lo em diferentes locais. Sempre que possível, nós atribuiremos os créditos ao seu tema. Sua referência ficará também em nosso repositório como o author do tema, especificado no arquivo de configurações.

Envie-nos suas pull requests e nós as aprovaremos assim que identificarmos que elas não estão quebrando qualquer regra.

Antes de submeter, por favor certifique-se de que está seguindo nosso código de conduta.

Logos/temas que forem ofensivos, promoverem o ódio, desrespeito ou preconceito, ou que quebrem qualquer regra ou lei, não serão aceitos.