review-css-libraries-and-frameworks
Voltar à Trilha

Revisão de Bibliotecas e Frameworks CSS

--- id: 6724e2026e608219108d385a title: Revisão de Bibliotecas e Frameworks CSS challengeType: 31 dashedName: review-css-libraries-and-frameworks --- # --description--

Frameworks CSS

  • Frameworks CSS: Frameworks CSS podem acelerar seu fluxo de trabalho, criar um estilo visual uniforme em todo o site, fazer seu design parecer consistente em vários navegadores e manter seu código CSS mais organizado.
  • Frameworks CSS populares: Alguns dos frameworks CSS populares são Tailwind CSS, Bootstrap, Materialize e Foundation.
  • Desvantagens potenciais:
  • O CSS fornecido pelo framework pode entrar em conflito com seu CSS personalizado.
  • Seu site pode parecer semelhante a outros sites que usam o mesmo framework.
  • Grandes frameworks podem causar problemas de desempenho.

Dois Tipos de Frameworks CSS

  • Frameworks CSS utility-first: Esses frameworks possuem classes pequenas com propósitos específicos, como definir a margem, o padding ou a cor de fundo. Você pode atribuir essas classes pequenas diretamente aos elementos HTML conforme necessário. Tailwind CSS é categorizado como um framework CSS utility-first.
Aqui está um exemplo de como usar Tailwind CSS para estilizar um botão. 
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">
  Button
</button>
  • Frameworks CSS baseados em componentes: Esses frameworks possuem componentes pré-construídos com estilos pré-definidos que você pode adicionar ao seu site. Os componentes estão disponíveis na documentação oficial do framework CSS e você pode copiá-los e colá-los no seu projeto. Bootstrap é categorizado como um framework CSS baseado em componentes.
Aqui está um exemplo de como usar o Bootstrap para criar um grupo de lista. Em vez de aplicar pequenas classes aos seus elementos HTML, você adicionará o componente inteiro, incluindo a estrutura HTML. 
<div class="card" style="width: 25rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">HTML</li>
    <li class="list-group-item">CSS</li>
    <li class="list-group-item">JavaScript</li>
  </ul>
</div>

Tailwind CSS

Tailwind é um framework CSS utility-first. Em vez de escrever regras CSS personalizadas, você cria seus designs combinando pequenas classes utilitárias diretamente no seu HTML.

Utilitários de Design Responsivo

Tailwind usa prefixos como sm:, md: e lg: para aplicar estilos em diferentes tamanhos de tela. 
<div class="w-full md:w-1/2 lg:flex-row">Responsive layout</div>

Utilitários Flexbox

Classes como flex, flex-col, justify-around e items-center facilitam a criação de layouts flexíveis. 
<div class="flex flex-col md:flex-row justify-around items-center">
  <p>Column on small screens</p>
  <p>Row on medium and larger screens</p>
</div>

Utilitários de Grid

Tailwind inclui utilitários para CSS Grid, como grid, grid-cols-1 e md:grid-cols-3. 
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <div class="bg-gray-100 p-4">Column 1</div>
  <div class="bg-gray-100 p-4">Column 2</div>
  <div class="bg-gray-100 p-4">Column 3</div>
</div>

Utilitários de Espaçamento

Utilitários como mt-8, mx-auto, p-4 e gap-4 ajudam a criar espaçamento consistente sem escrever CSS. 
<div class="mt-8 p-4 bg-indigo-600 text-white">Spaced content</div>

Utilitários de Tipografia

Utilitários como uppercase, font-bold, font-semibold e text-4xl controlam a aparência do texto. Você pode definir tamanhos de fonte que se ajustam em pontos de interrupção, como text-3xl e md:text-5xl. 
<h1 class="text-3xl md:text-5xl font-semibold text-center">Responsive Heading
</h1>

Cores e Estados de Hover

Tailwind fornece uma ampla paleta de cores, como text-red-700, bg-indigo-600 e bg-gray-100. Classes como hover:bg-pink-600 tornam efeitos interativos simples. 
<a href="#" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md">
  Hover Me
</a>

Bordas, Anéis e Efeitos

  • Bordas: border-2 border-red-300 adiciona bordas com espessura e cores especificadas.
  • Rings: ring-1 ring-gray-300 cria efeitos semelhantes a contornos frequentemente usados para foco ou cartões.
  • Cantoneiras arredondadas e escalonamento: Classes como rounded-md, rounded-xl e scale-105 adicionam acabamento.
<div class="p-6 rounded-xl ring-2 ring-fuchsia-500 scale-105">
  Highlighted card
</div>

Gradientes

Tailwind suporta utilitários de gradiente como bg-gradient-to-r from-fuchsia-500 to-indigo-600. 
<div class="p-4 text-white bg-gradient-to-r from-fuchsia-500 to-indigo-600">
  Gradient background
</div>

Pré-processadores CSS

  • Pré-processador CSS: Um pré-processador CSS é uma ferramenta que estende o CSS padrão. Ele compila o código com sintaxe estendida em um arquivo CSS nativo. Pode ser útil para escrever CSS mais limpo, reutilizável, menos repetitivo e escalável para projetos complexos.
  • Recursos: Alguns dos recursos que podem ser fornecidos por preprocessadores CSS são variáveis, mixins, aninhamento e herança de seletores.
  • Pré-processadores CSS populares: Alguns dos pré-processadores CSS populares são Sass, Less e Stylus.
  • Desvantagens potenciais:
  • Compilar as regras CSS em CSS padrão pode causar overhead.
  • O código compilado pode ser difícil de depurar.

Sass

  • Sass: É um dos preprocessadores CSS mais populares. Sass significa "Syntactically Awesome Style Sheets."
  • Recursos suportados pelo Sass: Sass suporta recursos como variáveis, regras CSS aninhadas, módulos, mixins, herança e operadores para operações matemáticas básicas

Duas Sintaxes Suportadas pelo Sass

  • Sintaxe SCSS: O SCSS (Sassy CSS) expande a sintaxe básica do CSS. É a sintaxe mais usada para Sass. Arquivos SCSS têm a extensão .scss.
Aqui está um exemplo de como definir e usar uma variável em SCSS. 
$primary-color: #3498eb;

header {
  background-color: $primary-color;
}
  • Sintaxe indentada: A sintaxe indentada foi a sintaxe original do Sass e também é conhecida como a "Sass syntax."
Aqui está um exemplo de como definir e usar uma variável na sintaxe indentada. 
$primary-color: #3498eb

header
  background-color: $primary-color

Mixins

  • Mixins: Mixins permitem agrupar múltiplas propriedades CSS e seus valores sob um nome e reutilizar esse bloco de código CSS em toda a sua folha de estilo.
Aqui está um exemplo de definição de um mixin na sintaxe SCSS. Neste caso, o mixin é chamado center-flex. Ele tem três propriedades CSS para centralizar elementos usando flexbox. 
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
Aqui está um exemplo de uso do mixin que você definiu. 
section {
  @include center-flex;
  height: 500px;
  background-color: #3289a8;
}
# --assignment-- Revise os tópicos e conceitos de CSS Libraries e Frameworks.