Design responsivo é o desenvolvimento de soluções online que se adequam automaticamente a diferentes tamanhos de telas como celulares, tablets e desktop. Atualmente a necessidade de investir nesse tipo de solução é muito grande, pois os acessos via dispositivos móveis estão a cada dia mais frequentes. Existem frameworks front-end que apoiam esse desenvolvimento e facilitam o trabalho do desenvolvedor/designer. Eles são padrões de CSS e código que oferecem agilidade e eficácia para desenvolver. A seguir, vamos apresentar alguns desses recursos:

Lista de Frameworks Front-End

1. Bootstrap

É um dos frameworks responsivos mais conhecidos e utilizados da atualidade. Bootstrap é um sistema desenvolvido em código aberto, hospedado, criado e mantido pelo GitHub.

• Cridores: Mark Otto e Jacob Thornton.
• No mercado desde: 2011
• Versão atual: 3.3.7
• Popularidade: mais de 111,000 no GitHub
• Princípio: RWD e mobile first.
• Tamanho do Framework: 154 KB
• Pré-processadores: Less e Sass
• Responsivo: Sim
• Modular: Sim
• Templates/layouts: Sim
• Ícones: Glyphicons Halflings
• Extras/Add-ons: muitos plugins disponíveis.
• Unique components: Jumbotron
• Documentação: Boa
• Customização: Personalizador básico de GUI. É preciso inserir os valores de cores manualmente, porque não há nenhum selecionador de cores disponível.
• Suporte de Navegador: Firefox, Chrome, Safari, IE8+ (é preciso Respond.js para IE8)
• Licença: MIT08

2. Foundation

Um framework bastante avançado e com funções semânticas, além disso, eles prometem um código limpo e rápido. O framework também disponibiliza uma ampla documentação com diversos exemplos para acelerar o aprendizado da sua utilização.

• Cridores: Mark Otto e Jacob Thornton.
• No mercado desde: 2011
• Versão atual:6.3.1
• Popularidade: mais de 25,400 no GitHub
• Princípio: RWD, mobile first, web semântica.
• Tamanho do framework: 197.5 KB
• Pré-processador: Sass
• Responsivo: Sim
• Modular: Sim
• Templates/layouts: Sim
• Ícones: Foundation Icon Fonts
• Extras/Add-ons: Sim
• Documentação: Boa, diversos recursos adicionais disponíveis.
• Customização: Personalizador de GUI básico semelhante à ferramenta do Bootstrap.
• Suporte de navegador: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• Licença: MIT

3. Semantic UI

Super inovador, o Semantic UI faz parte de um esforço contínuo para tornar os sites de construção muito mais semânticos. Com descreve o seu mote “Uma estrutura de componente de UI baseada em princípios úteis da linguagem natural”, ele utiliza princípios de linguagem natural, tornando o código muito mais legível e compreensível.

• Cridor: Jack Lukic
• No mercado desde: 2013
• Versão atual: 2.2
• Popularidade: mais de 34,000 no GitHub
• Prinicípios: Semântico, ambivalencia de tags, responsivo.
• Tamanho do framework: 806 KB
• Pré-processador: Less
• Responsivo: Sim
• Modular: Sim
• Templates/layouts: Sim, alguns templates iniciais são oferecidos.
• Ícones: Font Awesome
• Extras/Add-ons: Não
• Documentação: Muito boa. Ele oferece uma documentação muito bem organizada. Além disso, o usuário conta com um site para aprender a utilização do framework que oferece um guia para começar.
• Customização: Sem customizador via GUI, apenas customização manual.
• Suporte de navegador: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
• Licença: MIT

4. Pure

Fechando a lista de frameworks front-end, temos o Pure, leve e modular – escrito em CSS puro – que inclui componentes que podem ser usados em conjunto ou separadamente dependendo de suas necessidades. Esse framework front-end oferece estilos chamados “barebones”, ou seja,  são ideais para um projeto limpo e leve. Ele funciona bem para pessoas que não precisam de uma estrutura completa, mas querem apenas componentes específicos para incluir e completar um trabalho.

• Criador: Yahoo
• No mercado desde: 2013
• Versão atual: 0.6.2
• Popularidade: 16,637 stars on GitHub
• Princípio: SMACSS, minimalismo.
• Tamanho do framework: 16 KB
• Pré-processador: Nenhum
• Responsivo: Sim
• Modular: Sim
• Templates/layouts: Sim
• Ícones: Nenhum. É possível usar o Font Awesome.
• Extras/Add-ons: Nenhum
• Documentação: Boa
• Customização: GUI básica “Skin Builder”
• Navegadores suportados: últimas versões de Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
• Licença: Yahoo! Inc. BSD

Listamos essas 4 opções de frameworks front-end que são populares e possuem uma boa reputação em relação a sua qualidade. Escreva nos comentários quais frameworks opensource você utiliza e contribua para melhorar essa lista.

Quer mais conteúdo? Acesse o eBook 60 ferramentas gratuitas que irão potencializar a produção do seu dia a dia.

Ficou alguma dúvida sobre as opções de frameworks front-end? Deixe nos comentários!
Para hospedar seus projetos em um ambiente com tecnologia de ponta, conheça os planos de hospedagem compartilhada ou planos para desenvolvedores da KingHost.

Fique ligado no LAB, o Blog da KingHost, para mais novidades.