Snippets

Sección dedicada a compartir y explorar snippets útiles para WordPress y WooCommerce. Encuentra fragmentos de código para personalizar, optimizar y mejorar tus proyectos sin necesidad de añadir más plugins de los necesarios.

Tailwind
Woocommerce
WordPress
TailwindComponente de Badges con Tailwind CSS
Angel Julían

Este componente de badge ofrece una solución versátil para resaltar información o etiquetas en tus diseños. Su estructura flexible y variantes predefinidas permiten una integración rápida y personalizable en cualquier proyecto. 🎯

Características principales

  • Base adaptable: Incluye texto en tamaño pequeño, bordes redondeados y estilo visual limpio con opciones de color predefinidas.
  • Variedad de estilos: Diferentes variantes para ajustarse a contextos claros, oscuros o con colores destacados.
  • Uso optimizado: Diseñado con max-w-fit para ajustarse automáticamente al contenido.
  • Estilo destacado: Texto en mayúsculas y fuente seminegrita para mayor legibilidad e impacto visual.

Variantes disponibles

  1. Light (badge-light): Fondo claro y texto oscuro, ideal para entornos minimalistas.
  2. Dark (badge-dark): Fondo oscuro y texto claro, perfecto para diseños en modo oscuro.
  3. Primary (badge-primary): Colores destacados que llaman la atención, perfectos para etiquetas importantes.
  4. Secondary (badge-secondary): Una opción complementaria para etiquetas secundarias.
  5. Outline (badge-outline): Fondo blanco con borde definido, ideal para estilos más sutiles.
  6. Link (badge-link): Estilo ligero, sin fondo ni bordes, con un diseño que se asemeja a un enlace.

Ejemplos de uso

  • Badge de estado: Indicar el estado de un elemento (e.g., «Activo», «Pendiente»).
  • Categorías: Agrupar elementos por temática.
  • Destacados: Etiquetas como «Nuevo» o «Oferta».

Ventajas del componente

  • Consistencia visual: Diseñado para mantener uniformidad en el estilo de tus proyectos.
  • Escalabilidad: Fácil de adaptar y extender según las necesidades del diseño.
  • Flexibilidad: Variantes predefinidas que se integran con diferentes paletas de colores y estilos.

Este componente de badge es una herramienta sencilla pero poderosa para mejorar la organización y presentación visual de tu interfaz. 💻✨

...
TailwindComponente de botón con variantes para Tailwind CSS
Ángel Julián

Este componente de botón está diseñado para ser altamente flexible y personalizable, permitiendo adaptar estilos, tamaños y variantes de acuerdo con las necesidades específicas de tu proyecto. 🚀

Características principales

  • Base sólida: Configuración predeterminada que incluye propiedades esenciales como diseño fluido, redondeo, transiciones suaves y espacio entre elementos.
  • Interactividad: Respuestas dinámicas al enfoque (focus) y al pasar el cursor (hover), incluyendo efectos de escala y transiciones.
  • Estilos predefinidos: Variantes listas para usar, como light, dark, primary, secondary, link y outline.
  • Tamaños personalizables: Opciones de tamaño (xs, sm, lg, xl) para adaptarse a diferentes contextos.
  • Diseño flexible: Clases para ancho completo (block) o estilo ancho adicional (wide).

Variantes disponibles

  1. Light (btn-light): Fondo claro y texto oscuro, ideal para interfaces minimalistas.
  2. Dark (btn-dark): Fondo oscuro con texto claro, perfecto para diseños con modo oscuro.
  3. Primary (btn-primary): Colores destacados, ideal para llamadas a la acción.
  4. Secondary (btn-secondary): Colores secundarios para complementos o acciones secundarias.
  5. Link (btn-link): Botón estilo enlace, sin fondo ni bordes.
  6. Outline (btn-outline): Botón con borde definido y sombra al pasar el cursor.

Tamaños personalizables

  • btn-xs: Tamaño extra pequeño.
  • btn-sm: Tamaño pequeño.
  • btn-lg: Tamaño grande.
  • btn-xl: Tamaño extra grande.

Extras

  • Ancho completo: Utiliza btn-block para un botón que ocupe toda la línea.
  • Estilo ancho adicional: Añade btn-wide para botones más amplios con espaciado extra.

Este componente ofrece una base escalable y sencilla para cualquier diseño, manteniendo la consistencia y flexibilidad que necesitas en tus proyectos. 🎨💻

...