Criação de Layouts Responsivos com PrimeFlex

PrimeFlex é uma biblioteca de utilitários CSS leve e poderosa que simplifica a criação de layouts responsivos em aplicações web. Combinada com Vue.js, ela oferece uma solução robusta para desenvolver interfaces rápidas e eficientes. Vamos explorar as classes utilitárias do PrimeFlex e ver um exemplo prático de como criar um layout responsivo, usando a sintaxe <script setup> em TypeScript.

Classes Utilitárias do PrimeFlex

PrimeFlex oferece várias classes utilitárias que facilitam o desenvolvimento de layouts responsivos:

1. Grid System: Semelhante a outros frameworks CSS como Bootstrap, o PrimeFlex possui um sistema de grid baseado em flexbox que ajuda a estruturar layouts complexos com facilidade.

   • grid: Define um container de grid.
   • col: Define uma coluna dentro de um grid.
   • col-{1-12}: Especifica o tamanho da coluna em um sistema de 12 colunas, por exemplo, col-6.

2. Flexbox Utilities: Auxiliam no alinhamento e distribuição de espaço entre itens de um container flexível.

   • flex-row, flex-column: Define a direção dos itens flex.
   • align-items-center, justify-content-between: Alinha itens verticalmente e distribui espaço horizontalmente.

3. Spacing Utilities: Facilitam o ajuste de margens e paddings sem a necessidade de CSS adicional.

   • m-2, p-3: Aplica margens e paddings. Os números variam de 0 a 8, indicando o tamanho do espaço.

4. Visibility Utilities: Controla a visibilidade de elementos em diferentes tamanhos de tela.

   • hidden-sm: Oculta um elemento em telas pequenas.
   • visible-md: Torna um elemento visível em telas médias.

Exemplo Prático de Layout Responsivo

Vamos criar um exemplo prático de um layout responsivo utilizando PrimeFlex em uma aplicação Vue 3 com <script setup> e TypeScript.

Passo 1: Instalação e Configuração

Primeiro, instale o PrimeFlex em seu projeto Vue:

npm install primeflex

Inclua o PrimeFlex em seu arquivo principal CSS ou diretamente em seu componente Vue:

@import "primeflex/primeflex.css";

Passo 2: Componente Vue com Layout Responsivo

<script setup lang="ts">
// TypeScript script setup
</script>

<template>
  <div class="grid">
    <div class="col-12 md:col-6 lg:col-4 p-3">
      <div class="box">Item 1</div>
    </div>
    <div class="col-12 md:col-6 lg:col-4 p-3">
      <div class="box">Item 2</div>
    </div>
    <div class="col-12 md:col-6 lg:col-4 p-3">
      <div class="box">Item 3</div>
    </div>
  </div>
</template>

<style scoped>
.box {
  background-color: #f4f4f4;
  text-align: center;
  padding: 2rem;
  border-radius: 4px;
}
</style>

Explicação:

• O layout utiliza o sistema de grid do PrimeFlex para criar três colunas que se ajustam dependendo do tamanho da tela (col-12 em dispositivos móveis, md:col-6 em tablets, lg:col-4 em desktops).
• A classe p-3 é usada para adicionar padding uniforme em todas as direções dos elementos internos.

Essa abordagem simplifica a criação de layouts responsivos e dinâmicos, aproveitando as classes utilitárias do PrimeFlex. A integração com Vue.js permite ainda uma interatividade avançada e dinâmica nos componentes, facilitando o desenvolvimento de aplicações modernas e responsivas.