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.
60 Ferramentas Gratuitas para Agilizar sua Rotina
Ganhe tempo utilizando ferramentas inteligentes
[row cols_nr=”2″ class=”narrow”]
[col size=”6″]
[/col]
[col size=”6″]
[/col]
[/row]
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.
