Inicio

01

Pand4 Framework

Un framework CSS moderno, modular y responsive construido con SCSS.

Versión NPM Descargas mensuales Licencia Tamaño del bundle

🚀 Instalación

Instala Pand4 usando tu gestor de paquetes favorito:

Bash

# NPM
npm install pand4

# Yarn
yarn add pand4

# PNPM
pnpm add pand4

📖 Uso Básico

En CSS

CSS

/* En tu archivo CSS principal */
@import 'pand4';

En JavaScript

JavaScript

// Framework completo
import 'pand4';

// Versiones específicas
import 'pand4/dist/pand4.css';           // Completo expandido
import 'pand4/dist/pand4.min.css';       // Completo minificado
import 'pand4/dist/pand4-nano.css';      // Versión nano
import 'pand4/dist/pand4-utilities.css'; // Solo utilidades

En HTML

HTML

<!-- Desde node_modules -->
<link rel="stylesheet" href="node_modules/pand4/src/styles/pand4/dist/pand4.min.css">

<!-- Desde CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pand4/src/styles/pand4/dist/pand4.min.css">

🎨 Personalización

✅ Con CSS Variables (Recomendado)

La forma más sencilla y flexible de personalizar Pand4 es mediante CSS custom properties:

CSS

/* ✅ Método recomendado: CSS Variables */
:root {
  --p4-color-primary-500: #3b82f6;
  --p4-color-secondary-500: #64748b;
  --p4-font-family-base: 'Inter', sans-serif;
  --p4-text-size-base: 1rem;
  --p4-spacer-base: 1rem;
}
Ventajas: No requiere recompilar SCSS, cambios en tiempo real, fácil mantenimiento, mejor rendimiento.

⚠️ Con SCSS (Build personalizado)

Para configurar qué módulos incluir en tu build personalizado:

SCSS

/* ⚠️ Solo para configurar módulos personalizados */
@use 'pand4/scss' as *;

$p4-modules: (
  'utilities/buttons': true,
  'utilities/spacing': true,
  'components/cards': false,
) !default;
Nota: Este método es para crear builds personalizados. Para personalizar colores, tipografía, etc., usa CSS Variables.

📦 Variantes Disponibles

Pand4 ofrece tres variantes optimizadas para diferentes necesidades:

Completa

import 'pand4'

Framework completo con todos los módulos: reset, variables, elementos, componentes y utilidades.

Ideal para: Proyectos nuevos, prototipos rápidos.

Nano

import 'pand4/dist/pand4-nano.css'

Versión minimalista con solo reset, variables CSS y estilos base de elementos.

Ideal para: Base mínima + personalización total.

Utilities

import 'pand4/dist/pand4-utilities.css'

Solo clases utilitarias CSS sin componentes ni estilos base.

Ideal para: Complementar frameworks existentes.

🔧 Utilidades

Explora las utilidades disponibles en Pand4:

Enlaces a Utilidades
Ver Utilidades de Espaciado

HTML

<a href="/utilidades/espacios" class="p4-btn">
  Ver Utilidades de Espaciado
</a>

🎨 Iconos

Sistema de iconos SVG con carga dinámica:

Sistema de Iconos
Ver Galería de Iconos

HTML

<a href="/icons" class="p4-btn">
  Ver Galería de Iconos
</a>

✨ Ejemplos

Aquí algunos ejemplos de componentes construidos con Pand4:

Botones

HTML

<button class="p4-btn">
  Botón Principal
</button>

<button class="p4-btn p4-btn--ghost">
  Botón Ghost
</button>

<button class="p4-btn p4-btn--naked">
  Botón Naked
</button>
Botón con Icono

HTML

<button class="p4-btn p4-btn--icon" aria-label="Menú">
  <svg width="20" height="20" viewBox="0 0 24 24">
    <path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>
Utilidades de Layout
Box 1
Box 2

HTML

<div class="p4-d-flex p4-gap-16 p4-items-center">
  <div class="p4-p-16 p4-bg-primary-500 p4-text-white">
    Box 1
  </div>
  <div class="p4-p-16 p4-bg-secondary-500 p4-text-white">
    Box 2
  </div>
</div>

🤝 Contribuir

¡Las contribuciones son bienvenidas! Visita nuestro repositorio en GitHub para más información.

Desarrollo: Este framework está en desarrollo activo. ¡Tu feedback es muy valioso!