.dontaioncontest_widgetbox { border: 2px solid #C0C0C0 !important; background-color: #F8F8F8 !important; text-align: center !important; padding: 5px 10px !important; max-width: 300px !important; line-height: 20px; font-size: 13px; } .dontaioncontest_widgetbox h3 { font-weight: bold !important; font-size: 14px !important; line-height: 17px !important; margin: 0px 0px 5px 0px !important; padding: 0px !important; border: 0px solid transparent !important; } .dontaioncontest_button { margin: 5px 0px 0px 0px !important; } .dontaioncontest_contestdata {top: 0px; left: 0px;}
Post escrito por Yeltsin Lima
Quando se cria um website você tem várias opções: 1) criar um website do zero; 2) criar um website com base em um tema já existente ou 3) criar um website com base em um framework. Existe uma infinidade de frameworks na área de web, mas eu destaco dois com os quais eu trabalho (inclusive quem acessa o blog por browser, deve ter percebido que estou usando um deles).
Os frameworks tem sua particularidade, foram desenvolvidos por uma pessoa ou uma comunidade e alguns estão sempre em constante alteração, ou acrescentando novas funcionalidades, corrigindo bugs e diversas outras coisas interessantes. Deixa eu começar citando logo quais são: Twitter Boilerplate e Foundation. Vocês já devem ter ouvido falar de um deles ou de nenhum deles…

O layout foi desenvolvido em 12 tabelas, ou seja, ele é bastante flexível. A sua biblioteca possui 10kb (gzipped), ou seja, é bem pequena. No entanto, algumas funcionalidades precisam ser incluídas com a adição de scripts, ou seja, teoricamente você precisará incluir manualmente alguns scripts.
Existe dois tipos de layout: normais e fluídos. E os dois podem ser incluídos como responsivos (existe um CSS apenas para isso). O layout tem padrão por 940 pixels. O layout normal pode ser desenvolvido da forma como você preferir, o layout fluído possui uma barra lateral (esquerda, mas isso você pode customizar, é claro).
Eles possuem uma tabela dos dispositivos suportados. Eu até usarei a tabela (isso uma TABLE) do outro framework que eu uso para mostrar para vocês os dispositivos.
| Label | Layout width | Column width | Gutter width |
|---|---|---|---|
| Smartphones | 480px and below | Fluid columns, no fixed widths | |
| Smartphones to tablets | 767px and below | Fluid columns, no fixed widths | |
| Portrait tablets | 768px and above | 42px | 20px |
| Default | 980px and up | 60px | 20px |
| Large display | 1200px and up | 70px | 30px |
Deixei em inglês. Sou desses.
Ele vem com diversas funcionalidades, botões, formulários, tabelas personalizadas, ícones, labels, badges, alertas, barra de progresso e mais uma infinidade de outras funconalidades.

Assim como o Twitter Boilerplate, o Foundation já vem nativamente com formatos responsivos de layout. A diferença é que ao invés de você precisar customizar o layout, na verdade o próprio layout já é “responsivo” em si. Tente redimensionar a janela do navegador enquanto você visita o DicasWP. Sim, tem um bug com a barra de pesquisa, eu sei…
Ele também possui doze colunas, que não possuem tamanho fixo, ou seja, é algo meio fluído. A documentação dos dois é ótima, mas eu gosto mais da do Foundation. Exemplo de botões:
E eles também possuem os botões na versão “bonitinha”. O mesmo botão acima só que com a classe “nice”.
Os formulários são ótimos, inclusive como o plugin de formulário que eu uso é “bacana” por si próprio (Gravity), o framework já “automaticamente” deixa o formulário bonitinho.
Tem alertas.
Tem Labels.
ERRO!!!111!!ONZE!!
Tem tabs.
Ele vem até com um plugin de slide embutido.
Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.