buenodc

Search buenodc

bg cover

Frameworks CSS

Prof. Me. Danilo Camargo Bueno

O que são Frameworks CSS

“Um framework é um conjunto padronizado de conceitos, práticas e critérios para lidar com um tipo comum de problema, que pode ser usado como referência para nos ajudar a abordar e resolver novos problemas de natureza semelhante”.

  • Exemplos: Bootstrap, Tailwind CSS, Materialize, SemanticUI, Bulma, UIKit, PureCSS, Skeleton, Milligram etc…

bg cover

Component-based

  • Esta é a origem dos frameworks CSS.
  • Oferecem um conjunto de componentes de UI pré-construídos que os desenvolvedores podem conectar em seus aplicativos para montar interfaces rapidamente.
  • O objetivo é fornecer um sistema de design modular e reutilizável para facilitar a criação de aplicativos da Web sem começar sempre do zero.
  • Surgiram por volta de 2011 com o Bootstrap.
  • Exemplos: Bootstrap, Materialize, SemanticUI, Bulma, UIKit, etc.

CSS-in-JS

  • Permitem escrever CSS dentro de arquivos JavaScript, facilitando a criação de componentes com escopo definido.
  • Surgiram por volta de 2014 com o Styled Components.
  • Exemplos: Styled Components, Emotion, JSS.

Utility-first

  • Fornecem classes de baixo nível (utilitárias) para construir designs personalizados diretamente no HTML.
  • Oferecem máxima flexibilidade.
  • Surgiram por volta de 2017 com o Tailwind CSS.
  • Exemplos: Tailwind CSS, Tachyons, Basscss.

Porque usar Frameworks CSS?

  • Acelerar o desenvolvimento: vêm com componentes e estilos pré-construídos, eliminando a necessidade de escrever tudo do zero
  • Garantir consistência visual: ajudam a fornecer uma aparência coesa e consistente em diferentes componentes e páginas
  • Facilitar a manutenção do código: geralmente oferecem bibliotecas bem documentadas e convenções estabelecidas, facilitando a colaboração e a manutenção de bases de código.

Anatomia do Framework CSS

  1. Base Consistente (Reset CSS)
  2. Sistema de Layout Responsivo
  3. Elementos de Interface (componentes prontos ou classes utilitárias)
  4. Sistema de Design Unificado
  5. Suporte a Estados e Temas

1. Base Consistente

2. Sistema de Layout

  • Definem uma forma de diagramação do layout.
  • Pode-se imaginar como as colunas de uma tabela.

“uma estrutura bidimensional formada por eixos (ou linhas retas) verticais e horizontais que se interceptam.”

Grid System

bg right:47%

bg contain

3. El de Interface

Componentes prontos ou Classes utilitárias

  • Dropdowns
  • Agrupamento de botões
  • Elementos de navegação
  • Rótulos e marcadores
  • Alertas e barras de progresso
  • Carousel

bg right:40% contain vertical bg right:40% contain

4. Design Unificado

  • Conjunto de diretrizes e padrões visuais que garantem uma aparência e experiência consistentes.
  • Cores, Tipografia, Espaçamento, Ícones etc.
  • Exemplos de bibliotecas de icones: Font Awesome, Ionicons, IcoMoon, etc.

5. Suporte a Estados e Temas

  • Permitem a criação de temas personalizados e a adaptação de estilos com base em diferentes estados (hover, ativo, desabilitado etc.).
  • Facilitam a implementação de modos escuro/claro e outras variações visuais.

bg cover

bg right

Bootstrap

The most popular HTML, CSS, and JS library in the world.

Bootstrap: Histórico

  • 19 de agosto de 2011
  • Mark Otto no artigo “Bootstrap from Twitter”.
  • Surgiu para resolver problemas de inconsistência e dificuldade de manutenção no desenvolvimento front-end do Twitter, onde cada desenvolvedor usava uma biblioteca diferente.

“Um conjunto de ferramentas front-end para o desenvolvimento rápido de aplicações Web. É uma coleção de convenções HTML e CSS” (Mark Oto, 2011)

Bootstrap: Evolução

  • V1 (2011) - Foco em Desktop.
  • V2 (2012) - Design Responsivo.
  • V3 (2013) - Mobile First (V3.3.7 ficou bem conhecida).
  • V4 (2018) - Adoção de SASS e Flexbox.
  • V5 (2021) - Novos componentes, remoção do jQuery, etc.
  • V5.3.8 (2025): Versão mais recente.

Bootstrap: Popularidade

  • GitHub: Mais de 174.000 estrelas e 79.000 forks.
  • Comunidade: Forte suporte e um vasto ecossistema de templates e extensões.
  • Integração: Facilmente integrável com outros frameworks como Rails, Django, WordPress etc.
  • Empresas: Utilizado por milhares de empresas, incluindo Spotify, Udemy e Twitter.

Personalização

Como usar o Bootstrap?

É preciso conhecer:

  • As marcações HTML pré-definidas.
  • Os atributos e classes CSS pré-definidas.
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:">
    <use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>

Anatomia Bootstrap

Encaixa-se na anatomia dos frameworks CSS:

  1. Base Consistente
  2. Sistema de Layout Responsivo
  3. Elementos de Interface
  4. Sistema de Design Unificado
  5. Suporte a Estados e Temas

1. Base Consistente

*,
*::before,
*::after {
  box-sizing: border-box;
}

2. Sistema de Layout

  • Sistema de Grid (12 colunas)
<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

3. Elementos de Interface

  • Componentes prontos (botões, formulários, navegação etc.)
<!-- Button -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Alert -->
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

4. Sistema de Design Unificado

  • Cores, tipografia, espaçamento, ícones
  • Bootstrap Icons (não está mais incluida por padrão).
<!-- Typography -->
<h1 class="display-4">Display 4</h1>
<p class="text-primary">This is a primary text.</p>

<!-- Icon -->
<i class="bi bi-alarm"></i>

5. Suporte a Estados e Temas

  • Modos claro/escuro
  • Estados de componentes (hover, ativo etc.) 
    <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Como Escolher ?

  • Customização: Avalie o nível de personalização que o framework oferece. Ele permite que você estenda os estilos para atender às suas necessidades ou te prende ao seu sistema de design?

  • Curva de Aprendizagem: Considere a facilidade de uso para novos desenvolvedores e a qualidade da experiência de desenvolvimento. Verifique se há documentação e recursos suficientes para um aprendizado eficaz.

Como Escolher ?

  • Suporte da Comunidade: Uma comunidade de desenvolvedores ativa e solidária é um recurso importante. Verifique se existem pessoas contribuindo para o crescimento do framework e dispostas a ajudar.

  • Adequação ao Projeto: É essencial garantir que o framework seja compatível com os objetivos do seu projeto. Ele deve se alinhar aos requisitos de design e à identidade visual da sua marca.

Obrigado!

[email protected] · website/docs · github