Facilite o trabalho de criação de telas.
A waStandards possui uma biblioteca de atalhos CSS nativamente implementada. A biblioteca serve para incrementar funcionalidades simples a determinados elementos da página, ou até mesmo para afirmar/negar uma propriedade CSS.
Imagine que você necessite implementar um objeto na página, como um box do tipo singleBox1. Por padrão, este elemento possui uma
propriedade margin-bottom: 15px;. Porém, no contexto do seu projeto, há necessidade de implementar esse box com 30px de margem inferior.
Nesse caso, o uso de um atalho é recomendado. Veja o exemplo:
<div class="singleBox1 marginBottom30px">
...
</div>
No exemplo, um atalho de margem marginBottom30px foi adicionado à classe do elemento. Dessa forma, o atalho funcionou como uma
negação à margem nativamente instanciada no elemento singleBox1, modificando-a para o valor desejado.
Os atalhos também podem ser utilizados para setar funcionalidades simples, sem necessidade de escrever novos estilos. Veja no exemplo abaixo,
um exemplo de aplicação de uma fonte de 14px com uma cor cinza através dos atalhos font14px e colorGray:
<p class="font14px colorGray">
...
</p>
| Classe CSS | Descrição |
|---|---|
| clear | Aplica a propriedade 'clear' a um elemento |
| noClear | Remove a propriedade 'clear' de um elemento |
| cursorPointer | Define o cursor do tipo ponteiro ao passar o mouse em um elemento |
| cursorDefault | Insere a propriedade de cursor do tipo default (seta) ao passar o mouse em um elemento |
| margin1px, margin2px ... margin99px | Insere uma margem no elemento (valores disponíveis de 1px a 99px) |
| marginNeg1px, marginNeg2px ... marginNeg5px | Insere uma margem negativa no elemento (valores disponíveis de 1px a 5px) |
| marginAuto | Insere uma margem no elemento com o valor 'auto' |
| marginLeft1px, marginLeft2px ... marginLeft400px | Insere uma margem à esquerda do elemento (valores disponíveis de 1px a 400px) |
| marginLeftNeg1px, marginLeftNeg2px ... marginLeftNeg10px | Insere uma margem negativa à esquerda do elemento (valores disponíveis de 1px a 10px) |
| marginLeftAuto | Insere uma margem à esquerda do elemento com o valor 'auto' |
| marginRight1px, marginRight2px ... marginRight400px | Insere uma margem à direita do elemento (valores disponíveis de 1px a 400px) |
| marginRightNeg1px, marginRightNeg2px ... marginRightNeg10px | Insere uma margem negativa à direita do elemento (valores disponíveis de 1px a 10px) |
| marginRightAuto | Insere uma margem à direita do elemento com o valor 'auto' |
| marginTop1px, marginTop2px ... marginTop400px | Insere uma margem ao topo do elemento (valores disponíveis de 1px a 400px) |
| marginTopNeg1px, marginTopNeg2px ... marginTopNeg10px | Insere uma margem negativa ao topo do elemento (valores disponíveis de 1px a 10px) |
| marginTopAuto | Insere uma margem ao topo do elemento com o valor 'auto' |
| marginBottom1px, marginBottom2px ... marginBottom400px | Insere uma margem à parte inferior do elemento (valores disponíveis de 1px a 400px) |
| marginBottomNeg1px, marginBottomNeg2px ... marginBottomNeg10px | Insere uma margem negativa à parte inferior do elemento (valores disponíveis de 1px a 10px) |
| marginBottomAuto | Insere uma margem à parte inferior do elemento com o valor 'auto' |
| padding1px, padding2px ... padding100px, | Insere um 'padding' no elemento (valores disponíveis de 1px a 100px) |
| paddingAuto | Insere um 'padding' no elemento com o valor 'auto' |
| noPadding | Remove o 'padding' de um elemento |
| paddingLeft1px, paddingLeft2px ... paddingLeft100px, | Insere um 'padding' à esquerda do elemento (valores disponíveis de 1px a 100px) |
| paddingLeftAuto | Insere um 'padding' à esquerda do elemento com o valor 'auto' |
| noPaddingLeft | Remove o 'padding' à esquerda do elemento |
| paddingRight1px, paddingRight2px ... paddingRight100px, | Insere um 'padding' à direita do elemento (valores disponíveis de 1px a 100px) |
| paddingRightAuto | Insere um 'padding' à direita do elemento com o valor 'auto' |
| noPaddingRight | Remove o 'padding' à direita do elemento |
| paddingTop1px, paddingTop2px ... paddingTop100px, | Insere um 'padding' ao topo do elemento (valores disponíveis de 1px a 100px) |
| paddingTopAuto | Insere um 'padding' ao topo do elemento com o valor 'auto' |
| noPaddingTop | Remove o 'padding' ao topo do elemento |
| paddingBottom1px, paddingBottom2px ... paddingBottom100px, | Insere um 'padding' à parte inferior do elemento (valores disponíveis de 1px a 100px) |
| paddingBottomAuto | Insere um 'padding' à parte inferior do elemento com o valor 'auto' |
| noPaddingBottom | Remove o 'padding' à parte inferior do elemento |
| width1px, width2px ... width989px, | Insere um tamanho de largura ao elemento (valores disponíveis de 1px a 989px) |
| widthAuto | Insere um tamanho de largura com o valor 'auto' |
| noWidth | Remove o tamanho de largura pré definido de um elemento |
| width1percent, width2percent ... width100percent | Insere um tamanho de largura ao elemento com valor percentual (valores disponíveis de 1% a 100%) |
| minWidth5px, minWidth10px, minWidth15px ... minWidth1300px | Insere um tamanho mínimo de largura ao elemento (valores disponíveis de 5px a 1300px, espaçados de 5 em 5 até 50px e 100 em 100 após 100px) |
| height1px,height2px ... height989px | Insere um tamanho de altura ao elemento (valores disponíveis de 1px a 989px) |
| heightAuto | Insere um tamanho de altura com o valor 'auto' |
| noheight | Remove o tamanho de altura pré definido de um elemento |
| height1percent, height2percent ... height100percent | Insere um tamanho de altura ao elemento com valor percentual (valores disponíveis de 1% a 100%) |
| minHeight5px, minHeight10px, minHeight15px ... minHeight1300px | Insere um tamanho mínimo de altura ao elemento (valores disponíveis de 5px a 1300px, espaçados de 5 em 5 até 50px e 100 em 100 após 100px) |
| borderRadius4px, borderRadius6px, borderRadius8px, borderRadius10px | Insere uma borda arredondada ao elemento (valores disponíveis de 4px, 6px, 8px e 10px) |
| borderRadiusTop4px, borderRadiusTop6px, borderRadiusTop8px, borderRadiusTop10px | Insere uma borda arredondada ao topo do elemento (valores disponíveis de 4px, 6px, 8px e 10px) |
| borderRadiusBottom4px, borderRadiusBottom6px, borderRadiusBottom8px, borderRadiusBottom10px | Insere uma borda arredondada à parte inferior do elemento (valores disponíveis de 4px, 6px, 8px e 10px) |
| borderRadiusLeft4px, borderRadiusLeft6px, borderRadiusLeft8px, borderRadiusLeft10px | Insere uma borda arredondada à esquerda do elemento (valores disponíveis de 4px, 6px, 8px e 10px) |
| borderRadiusRight4px, borderRadiusRight6px, borderRadiusRight8px, borderRadiusRight10px | Insere uma borda arredondada à direita do elemento (valores disponíveis de 4px, 6px, 8px e 10px) |
| noTopLeftBorderRadius, noTopRightBorderRadius, noBottomLeftBorderRadius, noBottomRightRadius | Remove a borda arredondada dos respectivos locais indicados na classe (esquerda, direita, topo e inferior) |
| noBorderLeft, noBorderRight, noBorderTop, noBorderBottom, noBorder | Remove a borda dos respectivos locais indicados na classe (esquerda, direita, topo e inferior e laterais) |
| noBackgroundImage | Remove a imagem de fundo de um elemento |
| noBackgroundColor | Remove a cor de fundo de um elemento |
| fontUnderline | Insere o efeito de sobrescrito de um texto. |
| noFontUnderline | Remove o efeito de sobrescrito de um texto. |
| fontUppercase | Transforma o texto para o padrão de caixas altas |
| fontLowercase | Transforma o texto para o padrão de caixas baixas |
| noFontTransform | Remove os efeitos transformação de um texto (uppercase, lowercase, etc.). |
| nowrap | Impede que um texto quebre de linha. |
| font10px, font11px, font12px ... font40px | Insere um tamanho de fonte definido em um elemento (valores disponíveis de 10px a 40px, sendo a partir de 20px os valores espaçados de 2 em 2) |
| fontNormal | Atribui a fonte em estilo normal (sem bold, italic, etc.) |
| fontBold | Atribui a fonte em estilo negrito |
| fontItalic | Atribui a fonte em estilo itálico |
| fontVerdana | Atribui a fonte em tipografia 'Verdana' |
| fontArial | Atribui a fonte em tipografia 'Arial' |
| fontTahoma | Atribui a fonte em tipografia 'Tahoma' |
| fontCourier | Atribui a fonte em tipografia 'Courier' |
| textOverflowEllipsis | Atribui a funcionalidade de inclusão de (...) quando o conteúdo de um texto ultrapassar o tamanho máximo de seu container. |
| colorBlack | Cor de texto preta |
| colorOrange | Cor de texto laranja |
| colorGray | Cor de texto cinza |
| colorLightGray | Cor de texto cinza claro |
| colorRed | Cor de texto cinza claro |
| colorGreen | Cor de texto verde |
| colorBlue | Cor de texto azul |
| colorWhite | Cor de texto branco |
| alignLeft | Alinhamento de texto à esquerda |
| alignCenter | Alinhamento de texto ao centro |
| alignRight | Alinhamento de texto à direita |
| alignJustify | Alinhamento de texto justificado |
| lineHeightNormal | Altura da linha em tamanho padrão |
| lineHeight10px, lineHeight11px ... lineHeight26px (valores disponíveis de 10px a 26px, sendo a partir de 20px os valores espaçados de 2 em 2) | Altura da linha em tamanho padrão |
| displayNone | Define o atributo 'display' do elemento como invisível |
| displayInline | Define o atributo 'display' do elemento como em linha |
| displayBlock | Define o atributo 'display' do elemento como bloco |
| displayInlineBlock | Define o atributo 'display' do elemento como bloco em linha |
| displayTable | Define o atributo 'display' do elemento como tabela |
| displayTableRow | Define o atributo 'display' do elemento como linha de tabela |
| displayTableCell | Define o atributo 'display' do elemento como célula de tabela |
| vAlignTop | Define o alinhamento vertical de uma linha ou tabela como ao topo |
| vAlignMiddle | Define o alinhamento vertical de uma linha ou tabela como ao meio |
| vAlignBottom | Define o alinhamento vertical de uma linha ou tabela como à parte inferior |
| positionRelative | Define o atributo 'position' como relativo |
| positionAbsolute | Define o atributo 'position' como absoluto |
| positionFixed | Define o atributo 'position' como fixo |
| zIndex1, zIndex2 ... zIndex9999 | Define o eixo de profundidade z do elemento (valores disponíveis de 1px a 10px, com os adicionais zIndex99, zIndex999, zIndex9999) |
| floatLeft | Define a flutuação do elemento à esquerda |
| floatRight | Define a flutuação do elemento à direita |
| floatNone | Remove a flutuação do elemento |
| overflowHidden | Define o atributo 'overflow' como hidden |
| overflowAuto | Define o atributo 'overflow' como auto |
| opacity5percent, opacity10percent ... opacity95percent | Define o a opacidade de um elemento (valores disponíveis de 5% a 95%, espaçados de 5 em 5) |
| opacity5pctHover, opacity10pctHover ... opacity95pctHover | Define o a opacidade de um elemento ao passar o mouse em cima (valores disponíveis de 5% a 95%, espaçados de 5 em 5) |
| bgBlack5percent, bgBlack10percent ... bgBlack95percent | Define o plano de fundo de um elemento com uma mascara de imagem preta (valores disponíveis de 5% a 95%, espaçados de 5 em 5) |
| bgWhite5percent, bgWhite10percent ... bgWhite95percent | Define o plano de fundo de um elemento com uma mascara de imagem branca (valores disponíveis de 5% a 95%, espaçados de 5 em 5) |
| screenReaderText | Seta o conteúdo de um elemento visível apenas para leitores de tela (acessibilidade) |
| capitalize | Aplica a propriedade text-transform com o valor capitalize (primeira letra de cada em caixa alta). Só terá efeito se o texto estiver em caixa baixa. |
| firstLetterToUpper | Transforma a primeira letra de uma sentença em caixa alta. Funciona somente com display block ou inline-block |
