Variables CSS base para tipografía, colores, espaciado y bordes. Fácil de personalizar y sin dependencias externas.
Descripción
Las Variables CSS Base de Kodeval Pages son un grupo de variables CSS (valores que definís una vez y reutilizás en todo tu proyecto) listas para usar como punto de partida en cualquier página web.
La idea es juntar en un solo lugar los colores, las fuentes, los espacios entre elementos, los bordes, los tamaños y las transiciones (animaciones suaves). Así podés cambiar el look completo del sitio sin editar clase por clase.
Todo está hecho con CSS normal, el que ya conocés. No hace falta ningún framework (herramienta extra), ni preprocesador, ni ninguna librería de afuera.
Todas las variables se escriben adentro de :root, una parte especial del CSS que representa "toda la página". Poniéndolas ahí, podés usarlas en cualquier estilo, componente o sección del sitio.
Esto hace que el código sea más fácil de mantener y de ordenar, ya sea en un proyecto personal, un portfolio, un panel de control (dashboard), una landing o un sitio institucional.
El paquete trae variables ya armadas para: color principal, color secundario, fondos, superficies (como tarjetas o encabezados), tipografía, tamaños de texto, espacios (paddings), bordes redondeados, sombras, transiciones y el ancho máximo del contenido.
Gracias a esto, podés armar una identidad visual pareja para todo el sitio desde el primer día.
Si cambiás solo algunas variables dentro de :root, podés transformar todo el diseño del sitio sin tocar el resto del código de los componentes.
Usarlo es simple: copiás este código CSS en tu proyecto y después usás cada variable escribiendo var(--nombre-de-la-variable) en cualquier estilo que quieras.
Esto te deja reutilizar los mismos colores, tamaños y espacios en toda la página. Así evitás que un botón tenga un color y otro un color parecido pero distinto, y hace más fácil cambiar cosas después.
El sistema también sirve como base para armar un modo oscuro (dark mode) y un modo claro, cambiando los valores de las variables según una clase o atributo que vos definas.
Es decir: podés redefinir las variables para crear un modo oscuro u otras variantes de color, sin tener que reescribir cada componente de nuevo.
Otro punto a favor es que funciona en cualquier lado.
Como usa solo funciones estándar de CSS moderno, este sistema de variables anda en prácticamente cualquier navegador actual, sin configuración extra.
No necesitás instalar nada, ni compilar archivos, ni configurar herramientas externas para empezar a usarlo.
Este módulo es un buen punto de partida si querés armar tu propio sistema de diseño (un conjunto de reglas visuales para todo tu sitio) en un proyecto que va a crecer.
También lo podés ampliar agregando más variables con nombres que tengan sentido para tu proyecto, escalas de tamaños de texto, sistemas de grillas o configuraciones para componentes puntuales.
En resumen, las Variables CSS Base te dan una base ordenada, reutilizable y flexible para armar interfaces modernas, manteniendo todo prolijo y simple.
Es una buena opción si querés arrancar proyectos más rápido, mantener el código ordenado y evitar que los estilos queden desprolijos a medida que el sitio crece.
Para usarlo, pegá todo este código CSS (el bloque de abajo) dentro de tu archivo de estilos, o en una etiqueta <style> en el head de tu página. Después, en cualquier otro estilo que escribas, usá var(--nombre-de-la-variable) en vez de escribir el color o el tamaño directamente.
No disponible
/*
|--------------------------------------------------------------------------
| Variables CSS Base - Kodeval Pages
|--------------------------------------------------------------------------
| Este archivo contiene variables CSS reutilizables para ayudarte
| a mantener un diseño consistente y fácil de modificar.
|
| Las variables permiten centralizar colores, tamaños, espaciados
| y otros valores importantes en un solo lugar.
|
| Para usar una variable:
|
| var(--nombre-de-la-variable)
|
| Ejemplo:
|
| color: var(--color-text);
| Reemplazá estos valores con los colores,
| fuentes y espaciados de tu propio proyecto.
| Son ejemplos — no hay colores "correctos".
|--------------------------------------------------------------------------
*/
:root {
/*
|--------------------------------------------------------------------------
| COLOR PRINCIPAL
|--------------------------------------------------------------------------
| Este es el color más importante del proyecto.
| Se suele usar en botones, links o elementos destacados.
|--------------------------------------------------------------------------
*/
--color-primary: #5865f2;
/*
|--------------------------------------------------------------------------
| COLOR SECUNDARIO
|--------------------------------------------------------------------------
| Un color complementario para detalles o elementos secundarios.
|--------------------------------------------------------------------------
*/
--color-secondary: #7c3aed;
/*
|--------------------------------------------------------------------------
| COLOR DE FONDO
|--------------------------------------------------------------------------
| Define el color principal del fondo de la página.
|--------------------------------------------------------------------------
*/
--color-background: #0f172a;
/*
|--------------------------------------------------------------------------
| COLOR DE SUPERFICIE
|--------------------------------------------------------------------------
| Ideal para tarjetas, headers, modales o contenedores.
|--------------------------------------------------------------------------
*/
--color-surface: #1e293b;
/*
|--------------------------------------------------------------------------
| COLOR DE TEXTO PRINCIPAL
|--------------------------------------------------------------------------
| Color usado para párrafos y texto normal.
|--------------------------------------------------------------------------
*/
--color-text: #f8fafc;
/*
|--------------------------------------------------------------------------
| COLOR DE TEXTO SECUNDARIO
|--------------------------------------------------------------------------
| Para subtítulos, descripciones o texto menos importante.
|--------------------------------------------------------------------------
*/
--color-text-muted: #94a3b8;
/*
|--------------------------------------------------------------------------
| FUENTE PRINCIPAL
|--------------------------------------------------------------------------
| Define la tipografía principal del proyecto.
|
| Si la primera fuente no está disponible,
| el navegador utilizará una alternativa similar.
|--------------------------------------------------------------------------
*/
--font-main: "Inter", sans-serif;
/*
|--------------------------------------------------------------------------
| TAMAÑO DE TEXTO BASE
|--------------------------------------------------------------------------
| Tamaño estándar utilizado en párrafos.
|--------------------------------------------------------------------------
*/
--font-size-base: 16px;
/*
|--------------------------------------------------------------------------
| ESPACIADO PEQUEÑO
|--------------------------------------------------------------------------
| Útil para separaciones pequeñas o paddings internos.
|--------------------------------------------------------------------------
*/
--spacing-sm: 8px;
/*
|--------------------------------------------------------------------------
| ESPACIADO MEDIANO
|--------------------------------------------------------------------------
| Uno de los tamaños de separación más utilizados.
|--------------------------------------------------------------------------
*/
--spacing-md: 16px;
/*
|--------------------------------------------------------------------------
| ESPACIADO GRANDE
|--------------------------------------------------------------------------
| Recomendado para separar secciones completas.
|--------------------------------------------------------------------------
*/
--spacing-lg: 32px;
/*
|--------------------------------------------------------------------------
| BORDER RADIUS
|--------------------------------------------------------------------------
| Controla qué tan redondeadas son las esquinas.
|--------------------------------------------------------------------------
*/
--radius-base: 12px;
/*
|--------------------------------------------------------------------------
| SOMBRA BASE
|--------------------------------------------------------------------------
| Sombra estándar para elementos elevados como tarjetas.
|--------------------------------------------------------------------------
*/
--shadow-base: 0 4px 12px rgba(0, 0, 0, 0.25);
/*
|--------------------------------------------------------------------------
| TRANSICIÓN BASE
|--------------------------------------------------------------------------
| Hace que cambios visuales se vean más suaves.
|--------------------------------------------------------------------------
*/
--transition-base: 0.2s ease;
/*
|--------------------------------------------------------------------------
| ANCHO MÁXIMO DEL CONTENEDOR
|--------------------------------------------------------------------------
| Limita el ancho del contenido principal del sitio.
|--------------------------------------------------------------------------
*/
--container-width: 1200px;
}