O Framework CSS Blueprint serve para maquetar páginas web, mas também para estilizar formulários. No Manual de Blueprint CSS temos uma série de artigos destinados, principalmente, a explicar a maneira de maquetar páginas web facilmente com CSS, mas existem algumas outras classes que nos servirão para melhorar a estética de elementos como formulários.

Se tivermos o download de Blueprint à mão, poderemos observar que há um arquivo chamado "forms.css" que encontramos no diretório "blueprint/src". Esse arquivo, não precisa ser incluído para agregar esses estilos à nossa página web, já que se encontra em screen.css. No entanto no arquivo forms.css podemos ver o código de Blueprint destinado a estilizar os formulários, sem compressão e com comentários para poder entendê-lo facilmente.

Uma rápida leitura do código de forms.css nos dará algumas pistas sobre que estilos e classes CSS, Blueprint propõe para definir o aspecto dos formulários. Além disso, dentro do download de Blueprint encontraremos também um arquivo chamado "forms.html", dentro do diretório "testsparts", que nos mostrará os exemplos de aplicação das classes criadas para formulários.

Neste artigo vamos adicionar algumas notas e exemplos para as pessoas que estão aprendendo conosco este interessante framework.

No arquivo forms.css encontraremos basicamente dois pacotes de estilos:

1. Estilos para definir o aspecto de elementos de formulário
2. Estilos para criar caixas com mensagens para o usuário

Estilos para elementos de formulários

Estes estilos nos permitem ter uma base padrão sobre a que partir para a definição do aspecto dos formulários. Realmente, a maioria dos estilos estão definidos sobre as etiquetas de formulário, de modo que não temos que acrescentar nada no código HTML, senão simplesmente colocar os elementos de formulário e já estarão estilizados com Blueprint.

Porém ademais encontraremos duas classes que nos servirão para aplicar estilos em campos INPUT, quer sejam de texto, password, email, etc.

Classe "text": Simplesmente define a largura do campo input e cria um pouco mais de padding entre o conteúdo do INPUT e sua margem.

Classe "title": Adiciona uma largura e um padding no campo INPUT, iguais os produzidos na classe "text", mas, além disso, aumenta a fonte do texto que há dentro do campo INPUT, que aparecerá 50% maior que os campos normais.

Também existe uma classe que pode ser aplicada a formulários, ou seja, a etiquetas FORM:

Classe "inline": Para fazer formulários que se distribuam em uma ou várias linhas com elementos colocados uns ao lado dos outros. Esta classe simplesmente implementa uma altura de linha e se considera um pouco menos útil, mas podemos experimentá-la se queremos fazer formulários de uma linha, ou várias separando-as com etiquetas P.

Estilos para caixas de mensagens

Outra coisa típica que poderíamos querer fazer com formulários seria criar várias caixas de mensagens, para alertar o usuário quando um formulário foi enviado corretamente, com erro, etc. Para tanto, simplesmente foram implementadas várias classes que podemos aplicar a elementos como DIV, que formatam a saída com várias cores que podem ajudar o usuário a perceber visualmente o tipo de mensagem que lhe estamos mostrando.

Classe "error": Ideal para mostrar quando são produzidos erros. Formata a caixa e o texto com cor vermelha.

Classe "notice": Para produzir mensagens de advertência, para coisas que não chegam a ser erros mas que devem ser consideradas pelo usuário. Formata a caixa e o texto de amarelo.

Classe "info": Ideal para mostrar mensagens de informação interessantes para o usuário, mas que não são erros nem advertências sérias. Formata o texto e a caixa com azul.

Classe "success": Ideal para mostrar mensagens quando tudo saiu corretamente. Formata a caixa e seu texto de cor verde.

Exemplo de formulários com Blueprint

A verdade é que no próprio download de Blueprint já mostram um bom exemplo de realização de formulários e uso das diferentes classes que propõem. Como comentava, se pode encontrar no diretório "testsparts".

Porém, para os que desejem ver um exemplo realizado por nós mesmos para testar as diferentes classes, deixamos um link para abrir em uma página à parte.