Documentación Oficial - Librería MKSPANISHCSS LITE

Introducción

Esta librería es un framework CSS ligero basado en clases de utilidad y componentes modulares estructurados en español. Cuenta con soporte nativo responsive para dispositivos móviles y escritorio (max-width: 768px).

Menús de Navegación

Clases estructurales para construir barras de navegación adaptables y dinámicas:

Clase Selector	Descripción
.menu	Contenedor flexible de navegación principal con alineación justify-between.
.menu-oscuro	Modificador para fondos oscuros con texto blanco y acentos cyan.
.menu-glass	Efecto frosted-glass translúcido con desenfoque de fondo.
.menu-dropdown	Contenedor base para menús desplegables mediante estado hover.

Ejemplo Práctico: Menú Estándar

MiLogo

Inicio Servicios Contacto

<div class="menu"> <a href="#" class="menu-logo">MiLogo</a> <div class="menu-links"> <a href="#" class="menu-link">Inicio</a> <a href="#" class="menu-link">Servicios</a> <a href="#" class="menu-link">Contacto</a> </div> </div>

Tarjetas (Cards)

Componentes contenedores versátiles diseñados para catálogos, paneles de visualización o feeds:

Noticia Destacada

Descripción o extracto breve del artículo maquetado usando las utilidades de la librería.

Plan Premium

Acceso ilimitado a todas nuestras herramientas y servicios exclusivos en la nube.

<div class="card card-borde-azul"> <div class="card-body"> <h3 class="card-titulo">Noticia Destacada</h3> <p class="card-texto">Descripción o extracto breve del artículo...</p> <div class="card-footer"> <a href="#" class="card-boton">Leer más</a> </div> </div> </div>  <div class="card card-gradiente"> <h3 class="card-titulo">Plan Premium</h3> <p class="card-texto">Acceso ilimitado a todas nuestras herramientas...</p> </div>

Sistemas de Distribución y Maquetación (Flexbox / Grid)

La librería cuenta con herramientas ágiles para estructurar layouts complejos de manera nativa y responsive.

Clase Base	Propiedades Clave Asociadas
.flex-responsive / .d-flex	Activa Flexbox con adaptación automática a columna en móviles (max-width: 768px).
.grid-responsive	Alineación CSS Grid dinámica inteligente: `repeat(auto-fit, minmax(250px, 1fr))`
.columna-2, .columna-3, .columna-4	Genera rejillas fijas de 2, 3 o 4 columnas que colapsan a 1 sola en entornos móviles.
.centrado-total	Alineación perfecta al centro mediante flexbox en ambos ejes.

Utilidades de Color (Texto y Fondo)

Se dispone de un abanico extenso de utilidades semánticas y estéticas usando prefijos unificados.

Tipo de Atributo	Estructura del Selector	Gamas de Muestra Disponibles
Color de Texto	.texto-[color]-[variante]	rojo, azul-oscuro, verde-lima, amarillo-oro, naranja-atardecer, gris-carbon, morado-neon...
Color de Fondo	.fondo-[color]-[variante]	negro, blanco, pastel-rosa, azul-cielo, verde-menta, gris-plata, bronce, crema...
Fondo Gradiente	.gradiente-[nombre]	oceano, lava, bosque, galaxia, aurora, arcoiris, oscuro-1, claro-3...

Ejemplo de Gradientes y Textos Exóticos

Gradiente Océano

Gradiente Lava

Texto Verde Neón

<div class="gradiente-oceano relleno-15 texto-blanco">Gradiente Océano</div> <div class="gradiente-lava relleno-15 texto-blanco">Gradiente Lava</div> <div class="fondo-negro texto-neon-verde relleno-15">Texto Verde Neón</div>

Bordes y Redondeados (Borders & Radius)

Clases numéricas autogeneradas para definir contornos y suavizado de esquinas:

Grosores de Borde: Selectores estructurados desde .borde-1px-[color] hasta .borde-15px-[color].
Bordes Redondeados (Píxeles): Desde .redondeado1 (1px) hasta .redondeado50 (50px).
Formas Circulares (Porcentajes): Desde .circular1 (10%) hasta .circular10 (100% de border-radius).

Módulo Avanzado de Espaciados (Padding y Margin)

Las utilidades de espaciado siguen una nomenclatura semántica en español muy descriptiva:

Prefijo de Acción	Dirección del Margen	Rangos de Valor Soportados
.relleno- (Padding)	General, `-superior`, `-inferior`, `-izquierdo`, `-derecho`, `-horizontal`, `-vertical`	0, 1px a 10px, 12, 14, 15, 16, 18, 20, 22, 24, 25, 28, 30, 35, 40, 45, 50
.espaciado- (Margin)	General, `-superior`, `-inferior`, `-izquierdo`, `-derecho`, `-horizontal`, `-vertical`	Valores idénticos a relleno + soporte de palabras clave como `-auto`

Efectos y Animaciones Nativas

Agrega dinamismo e interactividad visual con clases de transición preconfiguradas:

Clase Animación	Efecto Técnico	Comportamiento
.animacion-girar	Rotación de 0 a 360 grados	Infinito, ideal para loaders.
.animacion-rebote	Desplazamiento vertical en el eje Y	Simula salto o rebote elástico.
.animacion-flotar	Efecto levitación suave	Desplazamiento armónico infinito.
.animacion-hover-elevar	Efecto translate en hover	Eleva el elemento y añade profundidad al pasar el mouse.

Modales y Componentes de Estado

Estructuras optimizadas para ser activadas dinámicamente mediante JavaScript o utilidades de visibilidad:

Clase de Estado	Propósito del Elemento
.m-modal	Contenedor de fondo oscuro opaco fijo para ventanas modales.
.m-modal-contenido	Caja central blanca con animación escalada de aparición.
.m-tab-activo / .m-tab-oculto	Manejo de visibilidad en paneles de pestañas (Tabs).
.m-tooltip-caja	Caja flotante oscura con flecha indicativa inferior para Tooltips.

Maquetación de Ventana Modal

Confirmar Acción

¿Estás seguro de que deseas guardar los cambios realizados en el documento?

<div class="m-modal"> <div class="m-modal-contenido"> <h2 class="m-modal-titulo">Confirmar Acción</h2> <div class="m-modal-body"> <p class="m-modal-texto">¿Estás seguro de que deseas guardar los cambios?</p> </div> <button class="m-modal-cerrar">Cerrar</button> </div> </div>

Elementos Avanzados y Formularios

Clases utilitarias listas para elementos HTML nativos comunes:

Campo de Texto Nativo (.input):

Badge Rojo

Loader en acción

<input type="text" class="input" placeholder="Escribe tu correo..." />  <span class="badge badge-rojo">Badge Rojo</span>  <div class="loader"></div>