O desenvolvimento da web front-end é um campo em constante mudança, e as ferramentas que usamos, como frameworks e bibliotecas, para tornar nosso processo de desenvolvimento mais eficaz e estimulante também evoluem continuamente.
Frameworks CSS são um aspecto importante do desenvolvimento de front-end. Eles nos ajudam a criar interfaces de usuário (IU) modernas de forma rápida e consistente, além de fornecer um nível de abstração por meio de um conjunto de classes CSS que executam tarefas específicas.
Neste artigo, abordaremos Uniform CSS , um gerador de classe de utilitário configurável e estrutura CSS desenvolvida inteiramente em Folha de estilo sinteticamente incrível (Sass) .
O que é CSS uniforme?
De acordo com a equipe por trás dele, Uniform CSS é “um gerador de utilitário totalmente configurável e estrutura CSS construída inteiramente em Sass, então você ganha o poder do fluxo de trabalho utilitário primeiro sem perder a produtividade do Sass.”
Uniform CSS usa um fluxo de trabalho semelhante ao Tailwind CSS ou StemCSS , onde os desenvolvedores projetam uma interface do usuário impressionante usando classes CSS predefinidas fornecidas pelo framework. Uniform CSS é o único que é construído inteiramente com Sass e totalmente configurável com CSS funcional.
Uniform CSS vs. Tailwind CSS
Então, o que torna o Uniform CSS diferente de outro CSS frameworks, como Tailwind CSS? Em primeiro lugar, é totalmente configurável porque permite que os desenvolvedores personalizem tudo dentro da estrutura. Eles podem personalizar prefixos e delimitadores, remover e estender cores e até mesmo modificar a sintaxe e adicionar ou remover propriedades.
Aqui está o que quero dizer:
//Todas as configurações são feitas no arquivo scss//main.scss @use”uniform”as * with (//adicione configurações aqui… $ config: (important: true, prefix: example, delimiter:”-“, colors: (green-color: green, yellow-cor: amarelo), excluir: (preenchimento, cor, margem,), incluir: (todos//inclui todas as propriedades.)));
O código acima seria enviado para o nosso arquivo CSS, onde temos acesso às classes, da seguinte forma:
//main.css.example-bg-green-color {background-color: green! important; }.example-bg-yellow-color {background-color: yellow! important; }
Agora podemos usar esses utilitários em nosso código HTML.
Como o Uniform CSS é construído no Sass, ele compila para o CSS normal. Mas também oferece as vantagens que geralmente vêm com o trabalho no Sass, como prefixos de fornecedores para propriedades CSS, mixins, funções e muito mais.
E, se essas vantagens não forem suficientes, quando você usa Uniform CSS, você não precisa esperar para obter acesso às novas propriedades CSS-você pode simplesmente adicionar suas próprias propriedades diretamente na configuração do Sass.
Aqui está um exemplo de Uniforme :
//main.scss @use”uniforme”as * com ($ config: (utilitários: (corte inicial: (responsivo: verdadeiro, abreviação: principal, propriedades: (corte inicial), variantes: (corte: ambos)), borda do texto: (abreviação: texto, propriedades: (texto-borda), variantes: (capitulo: capitulo alfabético)))));
Compila para:
/* main.css */.leading-trim {lead-trim: both; }.text-cap {text-edge: cap alfabético; }
Instalando CSS Uniforme
Uniforme é bastante simples de configurar. Existem três maneiras de usar CSS Uniforme em nosso projeto. Vamos dar uma olhada em cada um.
Clonando o repositório GitHub
Basta clonar o repositório GitHub na pasta do projeto:
git clone https://github.com/ThinkUniform/uniformcss
Agora precisamos adicionar Uniform ao nosso arquivo.scss, compilá-lo e observar as alterações. Veja como fazer:
//adicione isso ao seu arquivo.scss @use”uniforme”como *;//agora compilamos usando um dos scripts de construção disponibilizados para nós ou apenas o fazemos usando um processo de construção sass de sua escolha yarn uniform
Instalá-lo desta forma nos permite configurar completamente o Uniform para atender às nossas necessidades.
Instalando via npm
Se você tiver Node.js instalado, simplesmente use este comando:
npm install uniformcss//adicione isso ao seu arquivo.scss @ use”uniform”como *;
Agora podemos compilar e observar as alterações usando um processo de compilação preferido do Sass, como a extensão watch Sass em Visual Studio Code Instalar o Uniform dessa forma também nos permite configurá-lo totalmente para atender às nossas necessidades.
Instalando a partir de um CDN
Para obter uma maneira rápida de começar a usar o Uniform, basta adicionar o CDN link na tag head do seu documento HTML:
https://cdn.jsdelivr.net/npm/[email protected]/dist/uniform.min.css
Com esta opção, você apenas poderá fazer ajustes básicos se usar a versão pré-compilada, de modo que não terá acesso a opções de personalização mais extensas.
Para configurar Uniforme ao trabalhar com a opção CDN, basta definir as variáveis CSS como sobrescreve em um pseudo-elemento: root, assim:
: root {–font-sans:’Poppins’, sans-serif;–primary-700: 255, 224, 249}
Agora você pode usar essas variáveis em seu documento HTML:
Olá!
Usando Uniform CSS em seu projeto
Agora vamos construir um componente de cartão simples usando classes de utilitários Uniform.
Como este é um projeto pequeno, primeiro instalaremos o Uniform usando um CDN. Mas, se desejar opções de configuração adicionais, você deve instalar via npm porque a opção CDN não nos fornece muita flexibilidade.
Vá em frente e adicione o seguinte link CDN à tag head do seu arquivo HTML:
https://cdn.jsdelivr.net/npm/[email protected]/dist/uniform.min.css
Agora podemos aplicar todas as classes do utilitário Uniform CSS ao nosso componente de cartão HTML:
