Em 2011, a primeira versão do Bootstrap (então chamada Twitter Bootstrap) foi lançada. Era um produto da equipe de interface do usuário do Twitter e era uma estrutura destinada a simplificar a criação de aplicativos de aparência profissional na web.
Seu lançamento revolucionou a forma como os desenvolvedores usavam CSS – adotou o que costumava ser uma abordagem sob medida e indisciplinada para a estilização da Web e deu aos desenvolvedores as ferramentas para criar sites com aparência profissional com componentes padrão e esforço mínimo.
À medida que mais e mais desenvolvedores começaram a usar o Bootstrap, outras estruturas CSS surgiram, conforme os requisitos de desenvolvedor e aplicativo se multiplicaram.
Agora na versão 4, o Bootstrap é uma biblioteca de 160kb (em formato reduzido) que oferece aos desenvolvedores um conjunto de utilitários que pode ser tudo menos a pia da cozinha. Pode-se facilmente gerar tags com esta aparência:
<button type = ”button” class = ”my-5 p-5 btn btn-sm btn-block btn-primary”> Clique aqui </button>
Em outras palavras, “aumento da classe”. Ao abordar a infinidade de requisitos que os aplicativos precisam, o Bootstrap e seus irmãos criaram uma infinidade de componentes HTML aninhados, classes de utilitários, temas complexos e interações javascript.
Embora as abordagens mais recentes, como Tailwind.CSS, tentem minimizar o inchaço da classe integrando-se mais profundamente na cadeia de ferramentas do desenvolvedor, a curva de aprendizado pode ser íngreme.
Recentemente, no Solitaired , exploramos exatamente o oposto. Queremos nos livrar do inchaço das aulas e ficar “sem aulas”. Acreditamos que isso permitirá que nossos jogos de paciência sejam executados de maneira mais suave e melhorem a experiência do usuário para nossos jogadores.
Classless significa exatamente o que diz – construir sites que minimizem, ou de preferência eliminem, a necessidade de aulas para criar um site atraente.
Em outras palavras, tudo o que você precisa fazer é usar o HTML padrão e colocar um estilizador sem classes no topo para obter um site formatado de forma limpa, responsivo e fácil de gerenciar.
Embora ir sem classes possa não ser realista para muitos aplicativos da web, pode ser absolutamente uma abordagem para sites estáticos, sites de portfólio, blogs pessoais ou mesmo aplicativos pequenos.
Quais são as principais bibliotecas sem classes de 2020?
Water.css
Água é minha biblioteca CSS preferida – ágil e bonita, e compactada com 2,67kb. Um dos aspectos mais interessantes da Água é que tem modos claro e escuro. Você pode escolher usar um ou ele se ajustará automaticamente com base nas preferências do usuário. Quem diria que você poderia ter tanto poder em uma biblioteca tão pequena?
Se você precisar de temas, o Water inclui documentação sobre como fazê-lo. A abordagem padrão depende de variáveis personalizadas CSS, que são suportadas por todos os navegadores, exceto o Internet Explorer. Apesar dessa incompatibilidade, as variáveis personalizadas tornam incrivelmente fácil alterar o tema water.css padrão. Para sites que exigem suporte do IE, você ainda pode personalizar usando yarn.
A água tem 5,3 mil estrelas até o momento, tornando-se indiscutivelmente a biblioteca sem classes mais popular que existe. Do nosso lado, estaremos migrando nosso decodificador de palavras para este nos próximos meses.
Como usar:
Adicione <link rel = ”stylesheet” href = ”https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css”> à sua tag <head>.
Tufte CSS
Nomeada em homenagem ao notável professor e pioneiro da visualização de dados Edward Tufte, esta biblioteca CSS tenta implementar suas sugestões em uma biblioteca CSS fácil de implementar. O Tufte CSS pode ser a escolha preferível para artigos mais longos, acadêmicos ou projetos pessoais, porque usa uma serifa e dá ênfase ao suporte a gráficos, tabelas e notas laterais.
Tufte tem 7,71kb compactado e foi estrelado por 4,5 mil vezes.
Como usar:
Baixe a biblioteca no link Github acima e adicione <link rel = ”stylesheet” href = ”path / to / tufte.css”> à sua tag <head>.
New.css
Com 4,8 kb compactado, new.css está no meio do pacote de tamanhos de biblioteca CSS sem classes. Semelhante ao Water, new.css cria páginas limpas e responsivas facilmente. O New.css também vem com alguns temas adicionais, caso você deseje estilos adicionais.
New.css também usa variáveis personalizadas CSS para facilitar a criação de temas.
Como usar:
Adicione <link rel = ”stylesheet” href = ”https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css”> à sua tag <head>. Eles também recomendam adicionar a fonte Inter, usando <link rel = ”stylesheet” href = ”https://fonts.xz.style/serve/inter.css”>.
Sakura
O tema padrão de Sakura visa um estilo calmo e limpo. No repositório GitHub também há vários temas que podem ser utilizados imediatamente. Com 2,8 mil estrelas, é uma das opções CSS Classless mais populares.
Sakura sugere o uso de normalize.css, que adicionará mais alguns kb à sua carga útil principal de ~ 2 kb compactada. Sua metodologia de temas é um pouco mais complicada do que a do Water, contando com SCSS para atualizar variáveis no CSS principal. Uma vantagem dessa abordagem, no entanto, é a compatibilidade, pois as variáveis CSS nativas não são suportadas em nenhuma versão do Internet Explorer.
Como usar:
Adicione <link rel = ”stylesheet” href = ”https://unpkg.com/sakura.css/css/sakura.css” type = ”text / css”> à sua tag <head>.
Marx
Com o slogan “A redefinição do CSS sem classes (perfeito para comunistas)”, Marx estaria nesta lista de qualquer maneira – mas também é muito popular, com mais de 1,4 mil estrelas no Github.
Marx também pode ter um tema fácil com o SCSS e a documentação tem algumas instruções úteis sobre como usá-lo com o Jekyll. Isso é bom, porque sites estáticos seriam um caso de uso comum e excelente para frameworks sem classes.
Como usar:
Adicione <link rel = ”stylesheet” href = ”https://unpkg.com/marx-css/css/marx.min.css”> à sua tag <head>.
Como você pode ver facilmente acima, o bom do CSS sem classes é que não é demais. Uma linha converte uma página da web feia em algo legal. Além disso, a maioria desses frameworks tem clock muito menor que 10kb, tornando-os pelo menos 16 vezes menores que o Bootstrap.
Obviamente, uma das grandes desvantagens do classless é que você não obtém os tipos de componentes complexos e interações prontas para javascript como faria com Bootstrap, Foundation ou algumas das outras bibliotecas por aí. No entanto, há uma fresta de esperança aqui. Como você depende principalmente de tags para formatação, isso o levará a ser mais semântico em sua página – o que é melhor para SEO e acessibilidade.