Você provavelmente não precisa da maioria dos recursos que vêm com grandes estruturas de UI, como o Bootstrap, especialmente quando você está trabalhando em projetos pequenos e simples que deseja apenas colocar em funcionamento o mais rápido possível. Felizmente, existem estruturas CSS menores e mais simples lá fora que você pode usar em seu lugar. Usar uma pequena estrutura CSS normalmente se traduz em uma curva de aprendizado mais suave para os desenvolvedores, não dependência de JavaScript para funcionalidade e tempos de carregamento mais rápidos para seus usuários. Eu criei uma excelente lista de estruturas CSS pequenas/minimalistas para você explorar. A maioria deles são menos de 5 KB (quando reduzido e compactado) e contém os ingredientes essenciais para a construção de designs web responsivos.
min, a menor estrutura CSS desta lista, possui um sistema de grade responsivo de 12 colunas, estilos de botões, estilos de tabela, ícones compatíveis com Android e muito mais. min ainda suporta navegadores antigos como o Internet Explorer 5.5.
Milligram é para UIs modernas – seu sistema de grade usa FlexBox, tamanhos e comprimentos usam o rem unidade, e é Mobile First. Estar na vanguarda tem um custo: o Milligram oferece suporte oficial apenas às versões mais recentes do Chrome, Firefox, IE, Safari e Opera.
Chama CSS
Fora da caixa, o Blaze CSS já é leve, mas você pode reduzir ainda mais o tamanho do arquivo devido à sua arquitetura modular que permite incluir apenas as partes que você pretende usar no seu projeto. (Leia as instruções para criar uma versão CSS Blaze personalizada para obter mais informações.)
Kube é excelente para uma estrutura CSS que pesa menos de 6 KB. Possui um sistema de grade responsivo, um conjunto robusto de classes para estilizar seus formulários web, múltiplas classes de tabelas, classes de notificação para exibir mensagens importantes aos seus usuários e muito mais.
Pure, um projeto de código aberto liderado pelo Yahoo! desenvolvedores, é um conjunto de módulos CSS que o ajudará a criar designs web responsivos rapidamente. Pure possui estilos básicos para todos os elementos HTML (desenvolvidos em cima de Normalize.css) e módulos para layouts de grade, formulários web, botões, tabelas e menus de navegação.
Furtivo
Autodenominando-se uma “microestrutura CSS”, o Furtive é voltado para web designs modernos. Assim como o Milligram, o Furtive é Mobile First, possui uma grade responsiva baseada no FlexBox e usa o rem unidade para comprimentos e tamanhos. Ele aborda o básico: botões, formulários e até classes de cores padrão.
Embora não tenha sido atualizado em mais de um anoEsqueleto é ainda um ponto de partida/padrão de alto nível para a construção rápida de designs web modernos e responsivos. Ele vem com um sistema de grade intuitivo e estilos básicos para seus elementos HTML.
CSS FOX
FOX CSS é uma estrutura CSS leve e modular. Ele usa a abordagem de design Mobile First, suporta navegadores tão antigos quanto o IE 9 e possui uma redefinição de CSS não agressiva (inspirada no KNACSS).
Baixo
Basscss é composto por 22 módulos CSS que consistem em uma redefinição de CSS, um sistema de grade, classes de cores, classes utilitárias para ajudá-lo a construir seus designs responsivos e muito mais. Basscss é surpreendentemente rico em recursos para algo que pesa menos de 4 KB.
Simples
Siimple é uma estrutura CSS minimalista para criar designs web responsivos e limpos. É semelhante ao Skeleton: possui um sistema de grade intuitivo de 12 colunas e estilos básicos para tipografia, tabelas, botões, formulários e muito mais.
Lotus é um dos menores frameworks CSS que existem. Ele cobre o essencial: um sistema de grade responsivo, tipografia, botões e formulários da web.
Picnic CSS é uma estrutura de UI leve escrita em Sass, tornando mais fácil editar e personalizar variáveis como cores e comprimentos. Ele também possui alguns componentes de UI puramente CSS impressionantes, como uma janela modal e um controle deslizante de conteúdo.
Tabela Resumo
A tabela a seguir contém detalhes úteis sobre as estruturas CSS apresentadas nesta lista.
*Tamanho é o tamanho do arquivo do arquivo CSS minificado e compactado. Os valores de tamanho foram derivados de meus testes independentes das folhas de estilo prontas para produção/distribuição de cada estrutura CSS. **Popularidade é a quantidade de usuários que acompanham o código-fonte da estrutura CSS no GitHub. Este valor é medido pelo número de Estrelas o projeto tinha na época em que este post foi publicado. Um valor mais alto significa que o projeto é mais popular.
Leia a seguir
7 ferramentas CSS que você deve usar 5 bibliotecas de efeitos CSS para turbinar seus designs Desenvolvimento CSS em sites de grande porte
Perguntas Frequentes sobre Estruturas CSS
O que são estruturas CSS menores e mais simples?
As estruturas CSS menores e mais simples são alternativas às grandes bibliotecas de UI, como o Bootstrap, ideais para projetos pequenos que desejam um rápido desenvolvimento e tempos de carregamento mais rápidos.
Quais são os benefícios de usar uma pequena estrutura CSS?
Os benefícios incluem uma curva de aprendizado mais suave, não dependência de JavaScript para funcionalidade e tempos de carregamento mais rápidos para seus usuários.
Quais são algumas estruturas CSS listadas no texto?
Chama CSS, Furtivo, CSS FOX, Baixo e Simples são algumas das estruturas CSS mencionadas no texto.
Como escolher a melhor estrutura CSS para meu projeto?
Para escolher a melhor estrutura CSS para seu projeto, leve em consideração o tamanho do arquivo, a compatibilidade com navegadores e as funcionalidades necessárias para seu design responsivo.
Onde posso encontrar mais informações sobre essas estruturas CSS?
Você pode visitar os sites oficiais de cada estrutura CSS mencionada neste texto para obter mais informações sobre suas funcionalidades, documentação e exemplos de uso.
