Utilize os padrões de cores para criar aplicativos com a cara dos seus clientes
A biblioteca waStandards está preparada para receber layouts com cores variantes, de acordo com a identidade do cliente. Toda a coloração
básica de um template se encontra em um arquivo chamado Colors.min.css, instanciado na head da página.
O uso do arquivo Colors.min.css pode ser feito remotamente, a partir da chamada abaixo instanciada entre as tags
<head> </head>:
<link href="//wastandards.eadtech.net/versions/1.1/Templates/Mobile/Css/Colors.min.css"
rel="stylesheet" type="text/css" />
O template Mobile possui um conjunto de cores pré-definidas, que podem ser utilizadas em uma página a partir de classes CSS. Elas podem ser utilizadas como no exemplo a seguir:
<div class="cor1_bg">Esta div receberá a cor 1 como plano de fundo</div>
As cores atualmente disponíveis, com suas respectivas classes são:
| Classe CSS | Descrição |
|---|---|
| cor1_color | Aplica a cor 1 na cor de textos de um elemento |
| cor1_color_hover | Aplica a cor 1 na cor de textos de um elemento ao se passar o mouse em cima dele |
| cor1_brdr | Aplica a cor 1 nas bordas de um elemento |
| cor1_brdr_top | Aplica a cor 1 na borda de topo de um elemento |
| cor1_brdr_bottom | Aplica a cor 1 na borda inferior de um elemento |
| cor1_brdr_left | Aplica a cor 1 na borda esquerda de um elemento |
| cor1_brdr_right | Aplica a cor 1 na borda direita de um elemento |
| cor1_brdr_hover | Aplica a cor 1 na borda de um elemento ao se passar o mouse em cima dele |
| cor1_bg | Aplica a cor 1 como plano de fundo de um elemento |
| cor1_bg_hover | Aplica a cor 1 como plano de fundo de um elemento ao se passar o mouse em cima dele |
| Classe CSS | Descrição |
|---|---|
| cor2_color | Aplica a cor 1 na cor de textos de um elemento |
| cor2_color_hover | Aplica a cor 1 na cor de textos de um elemento ao se passar o mouse em cima dele |
| cor2_brdr | Aplica a cor 1 nas bordas de um elemento |
| cor2_brdr_top | Aplica a cor 1 na borda de topo de um elemento |
| cor2_brdr_bottom | Aplica a cor 1 na borda inferior de um elemento |
| cor2_brdr_left | Aplica a cor 1 na borda esquerda de um elemento |
| cor2_brdr_right | Aplica a cor 1 na borda direita de um elemento |
| cor2_brdr_hover | Aplica a cor 1 na borda de um elemento ao se passar o mouse em cima dele |
| cor2_bg | Aplica a cor 1 como plano de fundo de um elemento |
| cor2_bg_hover | Aplica a cor 1 como plano de fundo de um elemento ao se passar o mouse em cima dele |
Atenção! Instanciando o arquivo Colors.css remotamente, o template assumirá o padrão de cor
VERDE com a cor complementar LARANJA. Caso você deseje instanciá-lo com outra cor, ou mesmo criá-lo dinamicamente, será necessário hospedar o arquivo Colors.css
no seu projeto e insanciá-lo localmente entre as tags <head> </head>, modificando manualmente (ou dinamicamente)
as cores presentes no arquivo:
<link href="/mySite/Css/Colors.css" rel="stylesheet" type="text/css" />
Faça o download do arquivo de cores do template Mobile para manipulá-lo localmente. Nesse caso, não se esqueça de remover a chamada remota do arquivo de cores da biblioteca waStandards.
