BLiP Guideline

A Documentação

Olá, BLiPer! Esta é a documentação para o BLiP Toolkit. Aqui você conhecerá melhor a ferramenta e saberá como utilizar as classes e padrões para criar conteúdo para a plataforma BLiP! 😊

O BLiP Toolkit é um conjunto de configurações SCSS para componentes utilizados no BLiP. Ele foi criado em vista à padronização das especificações CSS dos elementos usados no portal, desde os mais simples, como textos, aos complexos, como cards e dropdowns.

É importante ler a documentação e estar a par dos padrões do projeto! Assim, o código do projeto ficará mais organizado e mudanças poderão ser feitas mais facilmente.

Princípios de Design

Nossos princípios de design ajudam a manter a consistência visual refletindo valores e características que nos diferenciam de outros produtos.

Confiabilidade através da consistência

Componentes que dialogam entre si, são hierárquicos e fazem parte da mesma família exprimem nosso profissionalismo nos mínimos detalhes.

Poder ao usuário pela simplicidade

Atenuamos interferências visuais, auxiliando o usuário a focar no que é importante, aprender e evoluir mais rápido.

Familiar, elegante e inovador quando vale a pena

Os elementos reproduzem comportamentos físicos que mimetizam o real no espaço: possuem peso, são influenciados pela luz, pelo movimento e por outros fenômenos.

Evolução constante - "Level Up"

Aprimoramentos são feitos em conjunto dos usuários reforçando nosso valor comunitário.

Navegação

Nesta documentação, cada capítulo contém informações das classes e padrões de um tipo de elemento ou parâmetro específico. Dentro de cada uma dessas sessões, você poderá encontrar informações sobre: classes do toolkit, exemplos de uso, e como editar ou adicionar ao código já existente.

Tipografia

Typefaces

Nunito

.bp-ff-nunito

Sizes

Level 1 Heading	.bp-fs-1
Level 2 Heading	.bp-fs-2
Level 3 Heading	.bp-fs-3
Level 4 Heading	.bp-fs-4
Level 5 Heading	.bp-fs-5
Level 6 Heading	.bp-fs-6
Level 7 Heading	.bp-fs-7
Level 8 Heading	.bp-fs-8

Paleta de Cores

Nossa paleta de cores é formada por três categorias: Corporativas, Semióticas e Neutras.

Para aplicar tais cores diretamente em textos, fundos e bordas, insira classes contendo o radical da classe seguido do nome da cor.

background-color	.bp-bg-{color}
color	.bp-c-{color}
border-color	.bp-bc-{color}

Corporativas são as nuances que acompanham a marca BLiP, e devem ser usadas em pontos que merecem destaque e atenção do usuário.

Bot	Aa	.bp-c-bot: #2CC3D5;
BLiP Light	Aa	.bp-c-blip-light: #0CC8CC;
BLiP Dark	Aa	.bp-c-blip-dark: #15AFB2;

Semióticas são cores que possuem significados recorrentes para usuários e transmitem mensagens.

Warning	Aa	.bp-c-warning: #F76556;
Delete	Aa	.bp-c-delete: #FB7A6D;
True	Aa	.bp-c-true: #4DCB7B;

Neutros são tons utilizados na tipografia e em grande parte dos componentes que compõem a plataforma. Eles auxiliam a criar uma experiência mais fluída, sem ruídos visuais.

Onix	Aa	.bp-c-onix: #242b36;
City	Aa	.bp-c-city: #52636C;
Rooftop	Aa	.bp-c-rooftop: #738192;
Desk	Aa	.bp-c-desk: #607B99;
Cloud	Aa	.bp-c-cloud: #8CA0B3;
Silver	Aa	.bp-c-silver: #94A3AB;
Time	Aa	.bp-c-time: #A8BFC4;
Breeze	Aa	.bp-c-breeze: #C9DFE4;
Sky	Aa	.bp-c-sky: #D4F2F4;
Offwhite	Aa	.bp-c-offwhite: #EAEEEE;

Gradientes são utilizados em situações específicas para deixar a aparência de um componente mais sofisticada.

Eles apenas modificam o fundo (background-image) do elemento e podem ser aplicados com o radical da classe seguido do nome do gradiente.

background-image

.bp-grad-{gradient}

Shine	.bp-grad-shine: (180deg, #f9fbfc 0%, #ecf1f3 100%);
Bot	.bp-grad-bot: (90deg, #51DBE3 0%, #28B4C3 100%);
BLiP	.bp-grad-blip: (137.45deg, #1BD6E7 0%, #0FC3F8 56.17%, #0ABCFF 100%);
Suit	.bp-grad-suit: (90deg,#3d4554,#2f3747);

Em resumo, nossa paletade cores é uma base para a Plataforma BLiP. Outros tons, apenas quando necessário, podem ser utilizados, desde que fiquem coerentes com a paleta.

Botões

Botões devem possuir a classe-base .bp-btn. Seus modificadores estão listados a seguir.

Variações Base e Flat

	.bp-btn
	.bp-btn .bp-btn--bot
	.bp-btn .bp-btn--blip-light
	.bp-btn .bp-btn--blip-dark
	.bp-btn .bp-btn--warning
	.bp-btn .bp-btn--delete
	.bp-btn .bp-btn--true

	.bp-btn .bp-btn--flat
	.bp-btn .bp-btn--flat .bp-btn--bot
	.bp-btn .bp-btn--flat .bp-btn--bot
	.bp-btn .bp-btn--flat .bp-btn--blip-dark
	.bp-btn .bp-btn--flat .bp-btn--warning
	.bp-btn .bp-btn--flat .bp-btn--delete
	.bp-btn .bp-btn--flat .bp-btn--true

Cor de texto e fundo

	.bp-btn .bp-btn--c-black
	.bp-btn .bp-btn--c-true
	.bp-btn .bp-btn--c-city

	.bp-btn .bp-btn--bg-onix
	.bp-btn .bp-btn--bg-true
	.bp-btn .bp-btn--bg-city

Outras variações

	.bp-btn .bp-btn--c-delete. .bp-btn--arrow
	.bp-btn .bp-btn--c-delete. .bp-btn--arrow
	.bp-btn .bp-btn--c-delete. bp-btn--no-background Texto não* escurece on-hover
	.bp-btn .bp-btn--flat .bp-btn--c-delete .bp-btn--no-border *Texto escurece on-hover
	.bp-btn disabled
	.bp-btn .bp-btn--flat disabled
	.bp-btn .bp-btn--arrow disabled
	.bp-btn .bp-btn--flat .bp-btn--arrow disabled
	.bp-btn .bp-btn--bot .bp-btn--small
	.bp-btn .bp-btn--bot .bp-btn--flat .bp-btn--small

Dropdowns

Dropdowns são elementos cuja visibilidade é ativada por um clique. Eles se ajustam ao conteúdo interno, contendo apenas algumas características-base, como mostrado abaixo.

Exemplos de Dropdown

*.bp-dropdown--hide esconde o dropdown

Dividers

Dividers são linhas usadas para separar seções

Exemplos de Dividers

.bp-divider-h

.bp-divider-h .bp-divider--medium

.bp-divider-h .bp-divider--large

.bp-divider-v

.bp-divider-v .bp-divider--medium

.bp-divider-v .bp-divider--large

Input

Label Placeholder	Input wrapper .bp-input-wrapper
Label Text Here	Input + focus .bp-input-wrapper--focus
Label Text Here	Input inválido .bp-input-wrapper--invalid
Label Text Here	Input válido .bp-input-wrapper--valid
Label Text Here	Input disabled .bp-input-wrapper--disabled

Checkbox

✓ Opção 1	Checkbox .bp-input--checkbox
✓ Opção 2

Radio

Opção 1	Radio .bp-input--radio
Opção 2
Opção 3