01. Bootstrap
O MAIS UITLIZADO DO MUNDO! By Twitter
Projete e personalize rapidamente sites responsivos para dispositivos móveis com Bootstrap, o kit de ferramentas de front-end de código aberto mais popular do mundo, apresentando variáveis e mixins Sass, sistema de grid responsivo, extensos componentes pré-construídos e poderosos plug-ins de JavaScript.
Assista um vídeo sobre Bootstrap
02. Material Components for the web
O FRAMEWORK CSS DO GOOGLE
Os Material Components for the web ajudam os desenvolvedores a executar o design de materiais. Desenvolvido por uma equipe central de engenheiros e designers de UX do Google, esses componentes permitem um fluxo de trabalho de desenvolvimento confiável para construir projetos da web bonitos e funcionais.
03. Tailwind CSS
O QUE MAIS TEM SE APROXIMADO DO BOOTSTRAP ULTIMAMENTE, MUITOS DEVS ESTÃO MIGRANDO PARA ELE
Tailwind CSS é um framework CSS de baixo nível altamente personalizável construída inteiramente em torno do conceito de classes de utilitário, que o Bootstrap também fornece pronto para uso. Com as classes utilitárias, você pode misturar e combinar propriedades CSS em qualquer lugar, sem necessariamente recorrer a estilos embutidos.
04. PatternFly
FEITO PELA Red Hat
PatternFly é um framework CSS de código aberto (sob a licença MIT) da Red Hat. O PatternFly tem uma abordagem diferente do Bootstrap: embora o Bootstrap seja destinado a qualquer pessoa interessada em criar um belo site, o PatternFly se concentra principalmente em desenvolvedores de aplicativos corporativos e fornece componentes, como barras, gráficos e navegações, que são muito atraentes para criar poderosos, painéis baseados em métricas. Na verdade, a Red Hat usa essa estrutura CSS para o design de seus produtos, como o OpenShift.
05. Pure.css
DESENVOLVIDO pela YAHOO
Se você deseja um framework CSS leve que esteja mais perto de codificar CSS por conta própria, mas que ajude a construir uma página da web legal, experimente Pure.css. Pure é um framework CSS leve com uma pegada mínima. Ele foi desenvolvido pelo Yahoo e é de código aberto sob a licença BSD.
6. Foundation
UM DOS COBIÇADOS À SUBSTITUIR O BOOTSTRAP
Foundation afirma ser a estrutura de front-end responsiva mais avançada do mundo. Ele fornece recursos avançados e tutoriais para a construção de sites profissionais.
07. Bulma
BASEADO EM Flexbox
Bulma é um framework de código aberto baseada no Flexbox e disponível sob a licença MIT. Bulma é um framework bastante leve, pois requer apenas um arquivo CSS.
08. HTML5 Boilerplate
O IMPOSTOR DE RESPEITO
O HTML5 Boilerplate não é um framework, mas um template frontend HTML5, CSS3 e JavaScript, nascido de um conhecimento combinado de centenas de desenvolvedores. Ele é usado para projetar qualquer tipo de página da web e ajuda a criar aplicativos ou sites da web rápidos, robustos e adaptáveis.
Basicamente, ele vem com todos os blocos de construção necessários em um pacote de frontend vanilla para projetar um site simples ou complexo, como linguagem de programação como classes auxiliares CSS, estilos de impressão padrão, Normalize.css, Modernizr, jQuery.
09. Material UI
PARA OS REACTERS
Material UI é um framework React UI, baseada no sistema Material Design do Google.
Em sua essência, a UI do material é uma coleção de componentes baseados no React com os conceitos do Material Design aplicados a eles. A premissa subjacente é que cada elemento da UI em seu aplicativo é um componente React, até mesmo os blocos de construção (contêineres, layouts …). Toda customização é feita em um ambiente JS, até mesmo o styling, usando a abordagem de CSS-in-JS, muito comum nos aplicativos React.
10. Vuetify
A BIBLIOTECA DO Vue.js
Vuetify é uma biblioteca de UI do Vue com componentes de materiais lindamente feitos à mão. Nenhuma habilidade de design necessária - tudo que você precisa para criar aplicativos incríveis está ao seu alcance.
11. Bonsai.css
O MÁXIMO DO MINIMALISMO
Um utilitário CSS completo com menos de 45kb de tamanho (8kb Gzip).
12. Bootflat
Bootflat é um framework CSS de código aberto derivada do Bootstrap do Twitter. Comparado ao Bootstrap, o Bootflat é mais simples, com componentes de estrutura mais leves.
13. Materialize
Materialize é um framework de front-end responsiva baseada no Material Design do Google com temas e componentes adicionais desenvolvidos pelos colaboradores do Materialize.
14. Skeleton
Se até Pure for muito pesado para você, existe um framework ainda mais leve chamada Skeleton. A biblioteca Skeleton tem apenas cerca de 400 linhas, e o framework fornece apenas os componentes essenciais para iniciar sua jornada no framework CSS.
15. Metro UI
Metro UI é um framework de frontend que traz o conceito de Metro (Design Language) do Windows(OS) para a web. Ele vem com mais de 100 componentes de interface de usuário para ajudá-lo a projetar qualquer tipo de site.
16. UIKit
UIKit é um framework de front-end modular responsiva projetada para ser leve e simples de usar. Ele foi criado para projetar layouts de web perfeitos para dispositivos móveis e telas de desktop.
17. Element
Elemento é um conjunto de componentes Vue.js reutilizáveis e pré-projetados. Princípios como consistência, feedback, eficiência e controlabilidade orientam as decisões de design por trás dessa estrutura.
18. Onsen UI
Onsen UI é um framework de desenvolvimento de UI para aplicativos móveis híbridos (Cordova, etc) e web (PWA). Ele permite que os desenvolvedores criem aplicativos móveis usando tecnologias da web como CSS, HTML5 e JavaScript.
19. Cirrus
Cirrus é um framework somente CSS totalmente responsivo e abrangente com belos controles e estrutura simplista. Você pode integrar o Cirrus com qualquer design existente ou usá-lo para iniciar seu próximo projeto. Ele vem com duas opções de pacote: um pacote “core” com estilo e funcionalidade simples e um pacote “ext” que estende “core” com um subconjunto de componentes para prototipagem rápida.
20. MontageJS
MontageJS é um framework de aplicativo desenvolvido com as tecnologias padrão HTML5, CSS e JS da web. Ele é projetado com foco na manutenção e desempenho, fornecendo componentes modulares, vinculação de dados bidirecional em tempo real, serialização de objetos com mapeamento DOM, manipulação de eventos, ciclo de desenho de componentes gerenciados, etc.
21 Semantic UI
Ele permite escrever código HTML significativo e legível (portanto, a semântica), em vez de usar metodologias não intuitivas e detalhadas centradas em BEM versus SMACSS.
22. Material Design Lite
Rapidamente se tornou popular devido à sua experiência de usuário limpa e organizada. Os designers do Google então lançaram um framework CSS completa chamada Material Design Lite para obter ajuda da comunidade de código aberto para seu desenvolvimento posterior.
23. Groundwork
O framework Groundwork CSS é um framework responsivo HTML5, CSS e Javascript. Possui suporte completo para atributos de “ARIA state/role” e seletores de elemento semântico.
24. Cardinal
Cardinal é um framework CSS modular, “mobile-first” construído com desempenho e escalabilidade em mente. Ele não tem nenhum design de UI relacionado ao código desnecessário, o que torna sua estrutura muito leve em comparação com o Bootstrap. Além disso, permite controle total sobre a aparência dos sites.
25. Flexbox Grid
Flexbox é um sistema de grid baseado na propriedade flex display. O sistema de grid é muito semelhante ao sistema baseado em flex do Bootstrap 4.
26. Susy
Susy é um motor de layout de grid leve para Sass, projetado para simplificar o uso de layouts de grid sem nunca atrapalhar, seja a grid floats, flexbox ou baseada em tabelas. Susy trabalha diretamente no estilo das classes que você definiu e personalizou.
27. Inuit
O Inuit não é inútil, aliás bastante útil! 😃 Ele não fornece interface do usuário e design fora da caixa, em vez disso, fornece uma base arquitetônica sólida sobre a qual você pode concluir seu próprio trabalho.
28. 960 Grid System
Como o próprio nome antecipa, o 960 Grid System era um framework CSS de grid adaptada para aplicativos de desktop. Na época em que foi criado, os aplicativos da web móvel eram quase inexistentes e a maioria das janelas de exibição de desktop tinham cerca de 960 pixels de largura, daí o nome. É tão antigo que nem responde.
29. Jeet
Jeet é um framework CSS de grid para projetos baseados em Sass ou Stylus. Os grids são escritos usando marcação semântica (como “coluna (⅓)”) contando com o uso pesado de mixins (funções Sass/Stylus). Ele usa técnicas desatualizadas para layouts (floats, clearfixes, etc).
30. INK
INK é um framework de web design rápido criado pela popular empresa portuguesa SAPO.
31. Kickstart
Kickstart CSS é uma biblioteca baseada no Bootstrap, mas sem muitos componentes que a transformariam em um framework de UI completa. Nesse sentido, é literalmente apenas uma biblioteca clichê “kickstart”.
32. Gumby
Gumby é um framework CSS que pode ajudá-lo a criar sites responsivos e compatíveis com dispositivos móveis. Ele vem com kit de ferramentas de UI, grid, componentes e extensões para fornecer uma experiência definitiva.
33. Topcoat
Topcoat não é um framework, é mais um impostor,…ops 😃 é uma biblioteca de componentes de código aberto construída inteiramente em padrões da web (CSS e HTML).
34. HTML Kickstart
O projeto HTML Kickstart foi iniciado para ajudá-lo a acelerar suas tarefas de design da web, fornecendo elementos de design predefinidos, como menus de navegação, botões e controles deslizantes animados. Dessa forma, você não precisa perder muito tempo projetando uma página da web. Em vez disso, você pode se concentrar em entregar um trabalho de qualidade em vez de se esforçar para fazer as coisas certas.
35. Mueller
Mueller é um sistema de grid CSS extremamente rápido que permite o design de layouts de site responsivos e adaptáveis. É usado principalmente para prototipagem, mas também lida com fundos, bordas, margens e preenchimentos, raio, bem como outros estilos de digitação adicionais.
36. Simple Grid
Simple Grid é um sistema de contêiner e grid simples e leve para websites. Esta não é um framework com itens como formulários e botões. Simple Grid é útil quando você não quer design extra e recursos relacionados ao tema do Bootstrap.
37. Powertocss
Powertocss é um framework CSS versátil. Simples, leve e ágil. Ao vincular um único arquivo CSS em seu código HTML5 existente e, em seguida, aplicar classes predefinidas, ele converterá automaticamente suas páginas da web estáticas em layouts mais acessíveis para dispositivos móveis. Esse é o poder que você obtém do Powertocss.
38. ArtDesignUI
ArtDesignUI é uma biblioteca jQuery para elementos da web de controle de estilo. O objetivo básico do ArtDesignUI é criar e gerenciar a interface do usuário de um site.
39. YUI
YUI é um framework CSS/JavaScript criada pelos desenvolvedores front-end do Yahoo!. Gratuito e de código aberto, o projeto está disponível no GitHub. Oferece funcionalidades para diversas situações, desde a manipulação de DOM, com a associação de event handlers, até a construção de layouts poderosos com sistema de grid, animações, widgets, skins, entre outros diversos recursos.
40. Zimit
Zimit é um framework de prototipagem responsiva para desenvolvedores web front-end. Ele usa LESS para obter CSS modular e escalonável e toda a estrutura compilada e minimizada em cerca de 64 KB.
41. W3.css
O CSS DA W3C
Esse é para finalizar a lista com estilo.
- W3.CSS é uma estrutura CSS moderna com suporte para desktop, tablet e design móvel por padrão.
- O W3.CSS é menor e mais rápido do que estruturas CSS semelhantes.
- O W3.CSS foi projetado para ser uma alternativa de alta qualidade ao Bootstrap.
- Ele foi projetado para ser menor, mais rápido, mais fácil de aprender e usar.
- Ele também foi projetado para ser independente do jQuery ou de qualquer outra biblioteca JavaScript.
Assista alguns vídeos de Desenvolvimento Web
Este post foi baseado no artigo opensource e classpert. Para mais opções consulte o alternativeto.
