# data[].attributes.body
Possui seu próprio sistema. A utilização se dá através da utilização de classes .container, .row, .col entre outras. Possui adaptabilidade para dispositivos móveis.

# data[].attributes.body
Solução própria (reboot.css) criado pelo time do Bootstrap

# data[].attributes.body
Define estilos padrões para os elementos simples do HTML tais como textos e possui a própria biblioteca de icones!

# data[].attributes.attachment_link.description
Official open source SVG icon library for Bootstrap

# data[].attributes.body
lançado em 2011 e versão atual 5.3

# data[].attributes.body
Possui diversos componentes. No caso do bootstrap o componente é formado de um código HTML e um conjunto de classes que permitem a personalização do componente como mostrado na imagem acima

# data[].attributes.body
Framework baseado na ideia de estilos prontos para elementos HTML e componentes próprios já estilizados tais como modais, barras de navegação, elementos de data, etc.

# data[].attributes.body
Fácil de usar

Auxilia o desenvolvimento do “layout padrão”

Customizável

Responsivo

Abordagem mobile-first

Documentação bem estruturada

# data[].attributes.body
Redesign é custoso

Muitos sites terão a mesma identidade visual que o seu

# data[].attributes.body
Deixe a impressão pessoal da dupla sobre o framework observado!

# data[].attributes.body
Deixar os nomes da dupla e o link para a documentação

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

# data[].attributes.attachment_link.readable_text
Components

Beautifully crafted UI components, ready for your next project.

Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart's content.

© 2023 Tailwind Labs Inc. All rights reserved.

# data[].attributes.attachment_link.title
Tailwind UI - Official Tailwind CSS Components & Templates

# data[].attributes.attachment_link.description
Beautiful UI components and templates by the creators of Tailwind CSS.

# data[].attributes.body
Luiz Fernando / Vitor Emanuel

# data[].attributes.attachment_link.readable_text
Compiling Sass

Instead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.

 MyWebsite/ |--css/ | |--materialize.css <-- compiled from scss/materialize.scss | |--js/ | |--materialize.js | |--scss/ | |--materialize.scss | |--components/ | |--index.html

# data[].attributes.attachment_link.description
Learn how to quickly get started using our CSS framework. We have guides for a variety of skill levels.

# data[].attributes.attachment_link.description
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

# data[].attributes.body
Jonathan Vinicius

# data[].attributes.attachment_link.readable_text
Framework-free open source UI toolkit.

Blaze UI provides great structure for building websites quickly with a scalable and maintainable foundation.

Accessibility

Accessibile selectors help to educate the importance of enabling everyone to access your site.

Framework free

Any framework, or no framework at all. You're not locked in. It's your choice.

# data[].attributes.attachment_link.description
Blaze is a framework-free open source UI toolkit. It provides great structure for building websites quickly with a scalable and maintainable foundation.

# data[].attributes.body
O Materialize CSS apresenta seu próprio sistema de grid, onde a estrutura é definida utilizando classes como .container, .row, .col, entre outras. Esse sistema permite uma fácil adaptação para diferentes dispositivos móveis.

# data[].attributes.body
Funciona semelhante ao Bootstrap.

Possui seu próprio sistema.

Baseado em Frexbox;

Divide a div em 12 colunas para utilizar basta colocar o container 'container columns' e escolher o número de colunas.

Se utilizar apenas o parâmetro 'column' irá dividir o container em partes iguais.

# data[].attributes.attachment_link.description
Semantic empowers designers and developers by creating a shared vocabulary for UI.

# data[].attributes.body
Matheus / Gabriel Moura

https://tachyons.io/

# data[].attributes.body
Solução própria.

# data[].attributes.body
Bulma reset() é um mixin usado na criação de um botão ou qualquer outro elemento não clicável. O mixin reset() aplica uma redefinição de estilo suave no elemento HTML. Este mixin é usado principalmente em elementos <button> .

# data[].attributes.body
Possui um básico sistema de Grid, a utilização é por meio de classes como "w-n" onde n é a largura desejada, e flutuação para esquerda com a classe "fl".

# data[].attributes.body
Não possui redefinição própria. Link para o conteúdo.

Para HTML utiliza Normalize.css;

Para CSS utiliza Reset CSS;

# data[].attributes.body
Possui sistema de GRID, mas limitado ao Flexbox;

Link para o conteúdo.

# data[].attributes.body
Possui Tipografia, font default sans-serif lato;

Link para o conteúdo.

Não possui Ícone próprios, incorpora a solução Fontawesome;

Link para o conteúdo.

# data[].attributes.body
É compatível com todas as bibliotecas de fontes de ícones, incluindo 'Font Awesome 5'.

Utilização da classe 'icon';

Por padrão, o 'icon' ocupará exatamente 1.5rem x 1.5rem e o ícone será redimensionado de acordo com a biblioteca de ícones que tiver utilizando.

Não possui sua própria biblioteca de ícones.

# data[].attributes.body
Possui seu próprio sistema. A utilização se dá através da utilização de classes .grid, .grid-rows-* (ex.: grid-rows-7), .grid-cols-* (ex.: grid-cols-2) entre outras. Possui adaptabilidade para dispositivos móveis através de prefixos como sm, lg, xl e 2xl (ex.: md:grid-cols-6).

# data[].attributes.body
Possui estilo predefinido e possibilita a customização de componentes e tema de forma amigável;

Link para o conteúdo.

Link para configuração do tema.

# data[].attributes.body
Define estilos padrões para elementos simples do HTML tais como textos e possuí a própria biblioteca de ícones.

# data[].attributes.body
Possui mais de 50 componentes UI.

Link para o conteúdo.

# data[].attributes.body
Lançado em 2014 e a versão atual 1.0.0

# data[].attributes.body
Não possui redefinição de folha de estilo, tem única e pequena alteração na tag "ul" onde define a propriedade "box-sizing" para "border-box".

# data[].attributes.body
Seu primeiro release foi em 2016.

Versão Atual: 0.9.4

# data[].attributes.body
Possui diversos componentes.

Formado por um código HTML e conjunto de classes, permitindo a personalização, como o exemplo dado

# data[].attributes.body
Framework totalmente gratuito baseado em classes para CSS;

Inspirado no Bootstrap e baseado em Flexbox;

Possui seus próprios componentes.

# data[].attributes.body
moderno;

100% responsivo;

gratuito;

modular;

compatível com quase todos os navegadores;

totalmente CSS (não requer JS);

fácil utilização;

interface bonita;

# data[].attributes.body
falta elementos JS, portanto desenvolvimento do zero!

# data[].attributes.body
Podemos dizer ser um dos melhores frameworks, por ser de fácil utilização, possuir uma interface atrativa e permite ser implementado CSS em páginas da WEB de forma mais eficiente.

# data[].attributes.body
O Materialize CSS inclui uma variedade de componentes, cada um composto por um código HTML específico e um conjunto de classes que facilitam a personalização do componente, como exemplificado na imagem acima

# data[].attributes.body
Para tipografia ele possui uma definição própria de tamanhos e escalas com base nas classes utilizadas, e não possui biblioteca de icones.

# data[].attributes.body
Lançado em 2016 (conforme o primeiro commit do repositório oficial) sendo sua atual versão a v4.12.0

# data[].attributes.body
O Tailwind injeta automaticamente o reset de estilos quando você inclui @tailwind base em seu CSS, que gera um arquivo baseado no normalize.css.

# data[].attributes.body
O Materialize CSS é um framework front-end que simplifica a criação de interfaces web responsivas e estilizadas. Ele oferece estilos prontos e componentes como modais, barras de navegação e elementos de data, facilitando o desenvolvimento de layouts modernos e interativos. Utilizando classes CSS e JavaScript para funcionalidades adicionais, o Materialize ajuda os desenvolvedores a criar aplicações web com design consistente e adaptável a diferentes dispositivos.

# data[].attributes.body
Para tipografia ele possui uma definição propria de tamanhos e escalas com base nas classes utilizadas, e para icones não possui propria bibliotecas

# data[].attributes.body
Estilos Pré-definidos

Componentes Personalizados

Responsividade

Suporte a Mobile-First

Documentação Completa

Comunidade Ativa

Integração com JavaScript

# data[].attributes.body
Possui algumas sugestões de componentes, os quais são tags HTML com um conjunto de classes para criar a estilização desejada.

# data[].attributes.body
Estilo Padrão Reconhecível

Tamanho do Arquivo

Complexidade de Personalização

Dependência de JavaScript

Suporte e Atualizações

Flexibilidade Limitada

# data[].attributes.body
Segue a abordagem Mobile-First e disponibiliza pequenos módulos que podem ser misturados, combinados ou utilizados de forma independente. Além disso a biblioteca possui apenas 14KB.

# data[].attributes.body
Contém definições para texto e fonte através de classes, tais como, .text-xs, .italic, .font-light, .text-center. Quanto a ícones, o Tailwind não disponibiliza de forma nativa, mas pode ser facilmente integrado por terceiros como o Heroicons.

# data[].attributes.attachment_link.description
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

# data[].attributes.body
Possui sistema próprio de Grid. A utilização se dá pela utilização das classes principais: .o-gri, .o-grid--demo, .o-grid__cell, .o-grid-text, entre outras. Desenvolvido no modelo mobile first, possuindo adaptabilidade para dispositivos móveis.

# data[].attributes.body
O UnoCSS suporta a criação de layouts de grade (grid) de forma flexível, criando layouts responsivos e complexos com facilidade.

Permite definir classes utilitárias para configurar os contêineres de grid e seus itens.

Uma classe principal grid que define o elemento como container, grid-cols-3 que traz a especificação de quantidade colunas e gap-4 adiciona um espaço (gap) de 1rem 4 espaçamentos.

UnoCSS se concentra em fornecer as principais funcionalidades do CSS por meio do uso de predefinições. Isso permite que os desenvolvedores adicionem estilo aos seus aplicativos de maneira rápida e fácil, sem sacrificar o desempenho ou a flexibilidade.

# data[].attributes.body
A proposta é interessante, mas não utilizaríamos.

# data[].attributes.body
Biblioteca leve 🪶;

Responsivo 📱;

Fornece acessibilidade 🦻🏻;

Abordagem Mobile-First 📲.

# data[].attributes.body
lançamento em Novembro de 2017 e versão atual v3.4.4

# data[].attributes.body
Outra grande característica do UnoCSS é a sua flexibilidade. Com seu design modular, os desenvolvedores podem facilmente adicionar ou remover predefinições conforme necessário. Isso permite um alto grau de personalização e controle sobre a aparência de um aplicativo. Além disso, os desenvolvedores podem criar facilmente suas próprias predefinições para adicionar novas funcionalidades ao mecanismo.

# data[].attributes.attachment_link.readable_text
UnoCSS is a modern CSS engine that's designed with flexibility and performance in mind. Unlike traditional CSS frameworks, UnoCSS focuses on providing the core functionalities of CSS through the use of presets. This allows developers to quickly and easily add style to their applications without sacrificing performance or flexibility.

At its core, UnoCSS is an atomic CSS engine. This means that it's built around the idea of creating small, reusable styles that can be combined to form complex designs. This allows for a high degree of customization and control over the look and feel of an application. With UnoCSS, developers can create styles for their applications without having to worry about the limitations of a rigid framework.

One of the key benefits of using UnoCSS is its focus on performance. The atomic nature of the engine means that styles are only loaded and applied when they're needed, which can help to significantly reduce the amount of time it takes for a page to load. Additionally, the lack of core utilities means that the CSS file size is kept to a minimum, which also helps to improve performance.

Another great feature of UnoCSS is its flexibility. With its modular design, developers can easily add or remove presets as needed. This allows for a high degree of customization and control over the look and feel of an application. Additionally, developers can easily create their own presets to add new functionalities to the engine.

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

Some might also call it Functional CSS, or CSS utilities. Basically, you can say an Atomic CSS framework is a collection of the CSS like these:

11/5/2021, 4:26:57 AM 1656 utilities | x50 runs (min build time) none 8.30 ms / delta. 0.00 ms unocss v0.4.15 13.58 ms / delta. 5.28 ms (x1.00) windicss v3.2.1 989.57 ms / delta. 981.27 ms (x185.94) tailwindcss v3.0.0-alpha.1 1290.96 ms / delta. 1282.66 ms (x243.05)

As you can see, UnoCSS is the fastest CSS framework in the benchmark. It's also the only framework that doesn't require a build step, which means that it's much faster to get started with.

Let's suppose you use Vite as your build tool. You can install UnoCSS with the following command:

and then add the following to your main entry file:

If you don't use Vite, you can read the documentation for other build tools.

You can see the full example https://uno.antfu.me/play

UnoCSS is a great CSS framework that's designed with performance and flexibility in mind. It's also the fastest CSS framework in the benchmark. If you're looking for a CSS framework that's fast and easy to use, UnoCSS is a great choice. However, Tailwind is more popular and has a larger community... So it's up to you to decide which one to use.

# data[].attributes.attachment_link.title
UnoCSS: The instant on-demand Atomic CSS engine

# data[].attributes.attachment_link.description
UnoCSS: The instant on-demand Atomic CSS engine. Tagged with css, tutorial.

# data[].attributes.body
Documentação pouco detalhada.

Sistema de Grid utilizando flutuação.

Necessidade de diversas classes para estilização.

Nomenclaturas com baixo entendimento.

# data[].attributes.body
O Blaze UI é um framework open source com licença MIT. Os elementos e CSS podem ser customizados a partir de uma instalação customizada do projeto, conforme orientado em sua doc. Não possui um arquivo de redefinição, a edição dos estilos é realizada a partir da edição de seus css/scss baixados.

# data[].attributes.attachment_link.readable_text
You may want to theme or override so much of Blaze that you should really build a customised version. The best approach is to grab the code from GitHub, change the variables and mixins and build the toolkit yourself.

Clone the git repo:

git clone git@github.com:BlazeSoftware/css.git git clone git@github.com:BlazeSoftware/atoms.git

Each pacakge should be developed independantly.

You can make changes to the CSS and Atoms repos separately using the following command:

There is a demo output per repo, that will be served on localhost and will update automatically as changes are detected.

Every component should have tests.

The CSS is linted and the Atoms are unit and snapshot tested.

# data[].attributes.attachment_link.description
Blaze is a framework-free open source UI toolkit. It provides great structure for building websites quickly with a scalable and maintainable foundation.

# data[].attributes.body
Proposta diferente do comum, utilizando métodos antigos de estilização, focado mais para estilos básicos.

O grupo não utilizaria devido a dificuldade de entendimento.

# data[].attributes.body
Não possui componentes de maneira nativa. A empresa comercializa templates e conjuntos de componentes em um domínio paralelo.

# data[].attributes.attachment_link.readable_text
Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.

© 2024 Tailwind Labs Inc. All rights reserved.

# data[].attributes.attachment_link.description
Beautiful UI components and templates by the creators of Tailwind CSS.

# data[].attributes.body
O Tailwind css é um framework de css, que facilita a criação de interfaces de usuário que permite aos desenvolvedores aplicar os estilos diretamente na classe do elemento HTML.

# data[].attributes.body
Abordagem Utility-First

Flexibilidade e Customização

Produtividade

Maior consistência visual

Redução de CSS não utilizado

Comunidade ativa e ecossistema

Facilidade de aprendizado

# data[].attributes.body
Define um padrão de elementos construídos pelo Blaze UI, mas editáveis através da build customizada. Não possui ícones próprios, mas é compatível com bibliotecas de ícones, como Font Awesome.

# data[].attributes.body
Curva de aprendizado inicial

Aumento do tamanho do HTML

Menos controle sobre o design

Complexidade em projetos maiores

Customização limitada sem JavaScript

# data[].attributes.body
Lançamento em 2018 e versão atual: 12.2.0

# data[].attributes.body
UnoCSS usa ícones feitos totalmente para CSS em vez de JavaScript, tornando muito mais fácil o uso de ícones em sua aplicação

Prose: Automatiza o dimensionamento de elementos de texto HTML comuns (h1, h2, p, etc.) com base em um tamanho de corpo definido pelo usuário, garantindo uma hierarquia de cabeçalhos consistente e escalável.

# data[].attributes.body
Para desenvolvedores frontend que já possuem conhecimento de CSS, o framework é muito rico em opções e muito prático. No entanto, não possui ícones e componentes nativos, o que pode ser fator determinando na escolha por outro framework.

# data[].attributes.body
A versão mais recente do UnoCSS é a 3.1.2, lançada em 14 de junho de 2024.

# data[].attributes.body
Possui componentes próprios, como alertas, autocompletes, modais.

# data[].attributes.body
https://getuikit.com/

# data[].attributes.body
O sistema de grid do UIKit ajuda a criar layouts organizados e responsivos de forma fácil. Ele usa uma estrutura de 12 colunas, permitindo que você ajuste a largura das colunas com classes como uk-width-1-2 para definir metade da largura. Com o uso de contêineres (uk-container), linhas (uk-grid), e colunas, você pode adaptar o layout para diferentes tamanhos de tela, garantindo que o design fique consistente e se ajuste bem em qualquer dispositivo.

O UIKit também oferece opções para ajustar o espaço entre as colunas e garantir que todas tenham a mesma altura, independente do conteúdo. Você pode remover os espaços entre as colunas com uk-grid-collapse e usar uk-height-match para igualar a altura delas. Com essa flexibilidade, o sistema de grid do UIKit é uma ótima escolha para criar layouts simples e responsivos para sites.

# data[].attributes.body
A redefinição de folha de estilo no UIKit é usada para garantir que todos os elementos HTML tenham um estilo básico e uniforme, independentemente do navegador. Isso evita que cada navegador aplique seus próprios estilos padrão, que podem variar e causar inconsistências no design do seu site.

Para aplicar essa redefinição, você usa a classe uk-base. Por exemplo, se você adicionar uk-base ao elemento body, todos os parágrafos, títulos e listas dentro desse body começarão com um estilo neutro, sem margens ou fontes específicas de um navegador. Isso te dá uma base limpa para personalizar o design como quiser, sem surpresas causadas por estilos predefinidos. Por exemplo, com uk-base, esses elementos terão um estilo básico e consistente, independentemente do navegador.

# data[].attributes.body
O UIKit facilita muito a criação de textos com suas classes de tipografia, você pode ajustar o tamanho e o estilo do texto de forma simples. Por exemplo, se você quiser um título bem grande, pode usar a classe uk-heading-large, ou se preferir centralizar um parágrafo, é só aplicar uk-text-center. Isso ajuda a manter o design limpo e a leitura agradável em qualquer dispositivo. Já por parte dos ícones há disponível alguns SVG que você pode adicionar facilmente ao seu site. Se precisar de um ícone de casa, por exemplo, basta usar a classe uk-icon="home". E o melhor é que você pode personalizar esses ícones em termos de tamanho e cor para que eles combinem perfeitamente com o visual do seu projeto.

# data[].attributes.body
A versão mais recente do UIKit é 3.21.9, lançada em 09 de Janeiro de 2017