3 estruturas CSS fantásticas que você não vai querer perder
Pessoalmente, eu prefiro começar a codificar qualquer projeto com apenas uma grade e construir a partir daí. Sou exigente assim e gosto de ter controle sobre tantas variáveis quanto possível.
Há momentos, no entanto, quando isso não é prático. Talvez você esteja criando um aplicativo ou um site excepcionalmente grande e complicado. Talvez você simplesmente não tenha tempo para estilizar cada elemento do zero, e você não precisa. É quando você quer um framework completo, com extras.
Bem, muito tem sido escrito sobre os frameworks “big name” - Bootstrap, Foundation, Gumby - então não vamos falar sobre isso aqui. Eu tenho jogado wi… quero dizer rigorosamente testando três das opções menos conhecidas. Dê uma olhada, um deles pode ser exatamente o que você precisa.
Kube
Kube é definitivamente uma ferramenta para o desenvolvedor front-end moderno. Apenas os navegadores modernos - e o IE9 + - são suportados. Os estilos padrão são bonitos, mas suaves o suficiente para serem adaptados para uso com quase qualquer marca.
É, em suma, uma estrutura simples, simples e de boa aparência, projetada com um apelo visual quase universal e destinada à personalização pesada.
As características
Descrever todos os recursos em profundidade, ou mesmo simplesmente listá-los, provavelmente ocuparia muito espaço neste artigo, portanto, darei os destaques: O próprio framework é baseado em LESS e modular. Se você quiser tudo, exceto os estilos de botão, por exemplo, é muito simples "compilar" o seu próprio. Basta remover a regra @import correspondente de kube.less e ir. É seguro dizer que existem estilos para praticamente todos os elementos HTML que você pode imaginar, e os extras habituais como botões, barras de navegação básicas, classes auxiliares e um sistema de layout de grade bastante sólido.
De certo modo, Kube é definido em parte pelo que não tem. Por exemplo, não há uma superabundância de elementos da interface do usuário e estilos extras. Não há plug-ins do jQuery para a funcionalidade da interface do usuário. E certamente não vem com a impressão de que você está “preso” a nada disso.
Conclusão
Kube é uma oferta sólida. Seus criadores não economizaram nos fundamentos, mas há um sentido definido de “apenas o que você precisa” que vem com essa estrutura. É um bom lugar para começar e, portanto, incorpora o verdadeiro propósito de qualquer estrutura. Colora-me impressionado.
Estrutura do IVORY
MARFIM, como Kube, é projetado para ser facilmente entendido e implementado rapidamente. A tipografia parece boa, mas é branda o suficiente para ser usada em quase todos os projetos, e os estilos gerais padrão também são.
É um framework projetado para lhe dar o suficiente para começar e alguns extras.
As características
As características são o que você esperaria normalmente: sistema de grade sólido e flexível, estilos para tipografia e todas as formas, e assim por diante. No entanto, o IVORY difere do Kube, pois você recebe alguns elementos extras da interface do usuário: botões, caixas de alerta, paginação, chaves de alternância, dicas de ferramentas, navegação de navegação, tabulações e acordeões.
O que diferencia esses componentes de interface do usuário de muitos outros é que eles são todos implementados com CSS3 e sem JavaScript. A única razão pela qual o jQuery UI está vinculado é fazer com que o selecionador de data funcione.
Apenas duas coisas que não gosto: alguns dos estilos de componentes de UI lembram muito os estilos do Bootstrap 2.0. Então sim, você provavelmente vai querer mudar isso. Além disso, o sistema de grade requer o uso de uma classe extra na última coluna em qualquer linha; Eu odeio isso.
Conclusão
Essas duas pequenas ressalvas à parte, o IVORY Framework é uma boa opção para qualquer número de projetos. Não é o mais fácil personalizável de opções, mas se você só precisa começar com um bom conjunto de padrões, e alguns componentes extras da interface, dê um giro.
Base
Base, de Matthew Hartman , adota uma abordagem um pouco mais moderna (no momento, em qualquer caso) para o framework CSS. Baseado em Normalize.css , começa com fontes de título finas e caixas planas para botões. Não há como negar que os estilos padrão são francamente bonitos.
Isso pode não ser do agrado de todos, dependendo das preocupações com a marca, mas é simples o suficiente para mudar. Afinal, a Base é toda sobre personalização.
As características
A base é fornecida nas versões LESS e SASS, para que você possa alterar rapidamente as variáveis e “recompilá-las” para atender às suas necessidades. As variáveis incorporadas incluem tamanhos de fonte, pontos de quebra, larguras do contêiner principal para cada ponto de interrupção e mais.
Várias aulas extras são fornecidas para ajudar você a configurar seus layouts específicos para dispositivos móveis, e há "mixins" em um arquivo separado para ajudá-lo no caminho.
Como o Kube, não há componentes de UI extras além daqueles que vêm com HTML por padrão, então se você quiser interfaces com abas, acordeões e coisas do gênero, você mesmo terá que fazê-las. Base parece ser voltada para a construção de sites bonitos em oposição a aplicativos da web .
Conclusão
Se você está criando um site que não precisa de muitos componentes de interface do usuário específicos do aplicativo, o Base é um recurso fantástico. Páginas construídas com ele já parecem bonitas; mas se você não gosta dos estilos padrão, não é muito difícil alterá-los.
