Introducción
M.CSS es un framework CSS minimalista diseñado para cubrir el 80% de casos de uso en desarrollo web con solo 10KB minificado. Se enfoca en proporcionar utilidades esenciales sin sacrificar funcionalidad ni rendimiento.
Características principales
- Peso mínimo: aproximadamente 10KB minificado
- Sin dependencias externas
- Variables CSS nativas para fácil personalización
- Sistema de espaciado consistente basado en múltiplos de 0.25rem
- Reset CSS moderno incluido
- Soporte responsive con breakpoints sm y md
- Accesibilidad integrada desde el diseño
- Semántica HTML5
Filosofía
El framework sigue una filosofía de utilidad-primero (utility-first) combinada con estilos base semánticos. Los elementos HTML tienen estilos predeterminados sensatos, mientras que las clases utilitarias permiten personalización granular cuando se necesita.
Principios de diseño aplicados
1. Espaciado vertical consistente
Todos los elementos de bloque (h1–h6, p, ul, ol) tienen márgenes inferiores predefinidos que establecen un ritmo vertical coherente. Los valores siguen una escala lógica:
- Títulos principales (h1, h2): margin-bottom de 1rem (--space-4) y 0.75rem (--space-3)
- Títulos secundarios (h3–h6): margin-bottom de 0.75rem a 0.5rem
- Párrafos: margin-bottom de 0.75rem (--space-3)
- Elementos de lista: margin-bottom de 0.25rem (--space-1)
2. Jerarquía visual clara
La escala tipográfica está diseñada para establecer una jerarquía visual inmediata:
- Títulos grandes (h1–h3): 2.25rem a 1.5rem
- Títulos pequeños (h4–h6): 1.25rem a 1rem
- Texto base: 1rem con line-height de 1.6 para óptima legibilidad
3. Sistema de espaciado modular
El espaciado sigue una escala de 8 puntos base (0.25rem = 4px):
- 0, 1 (4px), 2 (8px), 3 (12px), 4 (16px), 6 (24px), 8 (32px)
- Esta escala garantiza alineación consistente en toda la interfaz
- Los espacios se aplican mediante clases utilitarias (p-*, m-*, gap-*)
4. Mobile-first responsive
El framework usa un enfoque mobile-first donde los estilos base son para móviles y los breakpoints amplían funcionalidad:
- Base: 0–639px (móvil)
- sm: 640px+ (tablet)
- md: 768px+ (desktop)
5. Accesibilidad como fundamento
Todos los elementos interactivos incluyen estados de foco visibles, los formularios están correctamente etiquetados, y se proporcionan utilidades para contenido exclusivo de lectores de pantalla (.sr-only).
Instalación
Uso básico
Incluye el archivo CSS en el head de tu HTML:
<link rel="stylesheet" href="m.css">
Estructura HTML recomendada
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="m.css">
<title>Mi Proyecto</title>
</head>
<body>
<div class="container">
<!-- Tu contenido aquí -->
</div>
</body>
</html>
Variables CSS
M.CSS utiliza variables CSS nativas que puedes personalizar según tus necesidades.
Colores
| Variable | Valor por defecto | Uso |
|---|---|---|
| --color-primary | rgb(6, 78, 59) | Color primario del tema |
| --color-primary-light | rgb(209, 250, 229) | Variante clara del primario |
| --color-primary-dark | rgb(2, 44, 34) | Variante oscura del primario |
| --color-gray-50 a 900 | Escala de grises | Colores neutrales |
| --color-white | #ffffff | Blanco puro |
Espaciado
| Variable | Valor | Píxeles |
|---|---|---|
| --space-0 | 0 | 0px |
| --space-1 | 0.25rem | 4px |
| --space-2 | 0.5rem | 8px |
| --space-3 | 0.75rem | 12px |
| --space-4 | 1rem | 16px |
| --space-6 | 1.5rem | 24px |
| --space-8 | 2rem | 32px |
Personalización
Para personalizar las variables, sobrescríbelas en tu propio CSS:
:root {
--color-primary: #007bff;
--color-primary-light: #cce5ff;
--color-primary-dark: #004085;
}
Tipografía
Tamaños de texto
| Clase | Tamaño | Uso recomendado |
|---|---|---|
| .text-xs | 0.75rem (12px) | Metadatos, notas al pie |
| .text-sm | 0.875rem (14px) | Texto secundario, labels |
| .text-base | 1rem (16px) | Texto principal |
| .text-lg | 1.125rem (18px) | Texto destacado |
| .text-xl | 1.25rem (20px) | Subtítulos |
| .text-2xl | 1.5rem (24px) | Títulos secundarios |
| .text-3xl | 1.875rem (30px) | Títulos principales |
| .text-4xl | 2.25rem (36px) | Heroes, encabezados grandes |
Pesos de fuente
| Clase | Peso | Uso |
|---|---|---|
| .font-normal | 400 | Texto regular |
| .font-medium | 500 | Énfasis medio |
| .font-semibold | 600 | Subtítulos, énfasis fuerte |
| .font-bold | 700 | Títulos, elementos destacados |
Alineación de texto
.text-left
Alineado a la izquierda
.text-center
Centrado
.text-right
Alineado a la derecha
Ejemplo de uso
<h1 class="text-4xl font-bold text-primary">Título Principal</h1>
<p class="text-lg text-gray-700">Párrafo destacado</p>
<small class="text-sm text-gray-500">Texto pequeño</small>
Sistema de colores
Colores de texto
| Clase | Descripción |
|---|---|
| .text-primary | Color primario del tema |
| .text-gray-500 | Gris medio para texto secundario |
| .text-gray-700 | Gris oscuro para labels |
| .text-gray-900 | Casi negro para texto principal |
| .text-white | Blanco para texto sobre fondos oscuros |
Colores de fondo
| Clase | Descripción |
|---|---|
| .bg-primary | Fondo con color primario |
| .bg-primary-light | Fondo con variante clara del primario |
| .bg-gray-50 | Fondo gris muy claro |
| .bg-gray-100 | Fondo gris claro para secciones |
| .bg-white | Fondo blanco |
Ejemplos visuales
.bg-primary
.bg-primary-light
.bg-gray-100
.bg-white
.bg-gray-50
Sistema de espaciado
El espaciado utiliza una escala consistente basada en múltiplos de 0.25rem (4px). Este sistema garantiza alineación precisa y coherencia visual.
Padding
| Clase | Descripción | Valor |
|---|---|---|
| .p-0 a .p-8 | Padding en todos los lados | 0 a 2rem |
| .px-1 a .px-6 | Padding horizontal | 0.25rem a 1.5rem |
| .py-1 a .py-8 | Padding vertical | 0.25rem a 2rem |
Margin
| Clase | Descripción | Valor |
|---|---|---|
| .m-0 a .m-4 | Margin en todos los lados | 0 a 1rem |
| .mx-auto | Margin horizontal automático (centrar) | auto |
| .my-2 a .my-6 | Margin vertical | 0.5rem a 1.5rem |
| .mt-2 a .mt-6 | Margin superior | 0.5rem a 1.5rem |
| .mb-0 a .mb-6 | Margin inferior | 0 a 1.5rem |
Gap (espaciado en Grid y Flex)
| Clase | Valor | Uso |
|---|---|---|
| .gap-1 | 0.25rem | Espaciado mínimo |
| .gap-2 | 0.5rem | Espaciado pequeño |
| .gap-3 | 0.75rem | Espaciado medio |
| .gap-4 | 1rem | Espaciado estándar |
| .gap-6 | 1.5rem | Espaciado amplio |
Principios de uso
- Usa padding para espacio interno de componentes
- Usa margin para separación entre componentes
- Usa gap para espaciado entre items en Grid y Flexbox
- Prefiere .mb-0 en el último elemento de un contenedor para evitar espacio extra
Ejemplo práctico
<section class="bg-white p-6 rounded-lg mb-6">
<h2 class="mb-4">Título de sección</h2>
<p class="mb-3">Párrafo con espaciado</p>
<p class="mb-0">Último párrafo sin margen</p>
</section>
Sistema de Layout
Flexbox
Flexbox es ideal para layouts unidimensionales (filas o columnas).
Dirección
| Clase | Descripción |
|---|---|
| .flex | Activa display flex |
| .flex-row | Dirección horizontal (default) |
| .flex-col | Dirección vertical |
| .flex-wrap | Permite salto de línea |
Justify Content
| Clase | Efecto |
|---|---|
| .justify-start | Alinea al inicio |
| .justify-center | Centra elementos |
| .justify-between | Espacio entre elementos |
Align Items
| Clase | Efecto |
|---|---|
| .items-start | Alinea al inicio |
| .items-center | Centra verticalmente |
| .items-stretch | Estira elementos |
Ejemplo Flexbox
<div class="flex justify-between items-center gap-4">
<span>Elemento 1</span>
<span>Elemento 2</span>
</div>
Grid
Grid es perfecto para layouts bidimensionales complejos.
Columnas
| Clase | Columnas | Responsive |
|---|---|---|
| .grid-cols-1 | 1 columna | Base (móvil) |
| .grid-cols-2 | 2 columnas | Base |
| .grid-cols-3 | 3 columnas | Base |
| .grid-cols-4 | 4 columnas | Base |
| .sm:grid-cols-2 | 2 columnas | 640px+ |
| .md:grid-cols-3 | 3 columnas | 768px+ |
Ejemplo Grid responsive
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div>Tarjeta 1</div>
<div>Tarjeta 2</div>
<div>Tarjeta 3</div>
</div>
Container
La clase .container centra el contenido y limita el ancho máximo:
| Propiedad | Valor |
|---|---|
| max-width | 1200px |
| margin | 0 auto (centrado) |
| padding | 0 1rem (lateral) |
<div class="container">
<!-- Contenido centrado y limitado -->
</div>
Dimensiones
Anchos
| Clase | Valor | Uso |
|---|---|---|
| .w-auto | auto | Ancho automático |
| .w-full | 100% | Ancho completo |
| .w-1-2 | 50% | Mitad del contenedor |
| .w-1-3 | 33.33% | Un tercio |
| .w-2-3 | 66.67% | Dos tercios |
| .w-1-4 | 25% | Un cuarto |
| .w-3-4 | 75% | Tres cuartos |
Alturas
| Clase | Valor |
|---|---|
| .h-auto | auto |
| .h-full | 100% |
Anchos máximos
| Clase | Valor | Uso recomendado |
|---|---|---|
| .max-w-md | 28rem (448px) | Formularios pequeños |
| .max-w-lg | 32rem (512px) | Contenido medio |
| .max-w-xl | 36rem (576px) | Artículos |
| .max-w-2xl | 42rem (672px) | Contenido extenso |
| .max-w-4xl | 56rem (896px) | Secciones amplias |
| .max-w-full | 100% | Sin restricción |
Ejemplo de uso
<div class="container">
<article class="max-w-2xl mx-auto">
<!-- Artículo centrado con ancho máximo -->
</article>
</div>
Bordes y esquinas
Bordes
| Clase | Efecto |
|---|---|
| .border | Borde de 1px en todos los lados |
| .border-0 | Sin borde |
Border Radius
| Clase | Valor | Uso |
|---|---|---|
| .rounded-sm | 0.125rem (2px) | Esquinas sutiles |
| .rounded-md | 0.375rem (6px) | Estándar |
| .rounded-lg | 0.5rem (8px) | Esquinas pronunciadas |
Ejemplos visuales
.rounded-sm
.rounded-md
.rounded-lg
Display y visibilidad
Display
| Clase | Valor CSS | Uso |
|---|---|---|
| .block | display: block | Elemento de bloque |
| .inline | display: inline | Elemento en línea |
| .inline-block | display: inline-block | Híbrido |
| .hidden | display: none | Oculta elemento |
Overflow
| Clase | Efecto |
|---|---|
| .overflow-hidden | Oculta contenido que sobresale |
| .overflow-auto | Muestra scrollbars si es necesario |
Position
| Clase | Valor CSS |
|---|---|
| .relative | position: relative |
Accesibilidad
La accesibilidad está integrada en todos los elementos del framework. Aquí las utilidades específicas:
Screen Reader Only
La clase .sr-only oculta elementos visualmente pero los mantiene accesibles para lectores de pantalla:
| Clase | Uso |
|---|---|
| .sr-only | Oculta visualmente, accesible para lectores |
| .not-sr-only | Revierte .sr-only |
<button>
<span class="sr-only">Cerrar menú</span>
<span aria-hidden="true">×</span>
</button>
Focus visible
Todos los elementos interactivos tienen indicadores de foco automáticos:
- Outline de 2px en color primario
- Offset de 2px para mejor visibilidad
- Aplica a botones, enlaces, inputs y elementos con tabindex
Formularios accesibles
Los formularios incluyen estructura semántica automática:
- Labels asociados via atributo for
- Fieldsets con legend para grupos de controles
- Estados de foco visibles en todos los inputs
- Contraste de color suficiente (WCAG AA)
<fieldset>
<legend>Preferencias</legend>
<div>
<input type="radio" id="opt1" name="pref">
<label for="opt1">Opción 1</label>
</div>
</fieldset>
Mejores prácticas
- Usa elementos semánticos (nav, main, article, section)
- Siempre incluye atributos alt en imágenes
- Usa aria-labels cuando el contexto visual no es suficiente
- Mantén un orden lógico de tabulación
- Prueba la navegación con teclado (Tab, Shift+Tab, Enter)
Diseño Responsive
M.CSS usa un enfoque mobile-first con dos breakpoints principales:
Breakpoints
| Prefijo | Ancho mínimo | Dispositivo |
|---|---|---|
| (ninguno) | 0px | Móvil (base) |
| sm: | 640px | Tablet |
| md: | 768px | Desktop |
Clases responsive disponibles
Grid
- .sm:grid-cols-2, .sm:grid-cols-3
- .md:grid-cols-2, .md:grid-cols-3, .md:grid-cols-4
Flexbox
- .sm:flex-row, .md:flex-row
Texto
- .sm:text-left
Patrón mobile-first
<!-- 1 columna en móvil, 2 en tablet, 3 en desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
Estrategia de diseño
- Diseña primero para móvil (320–639px)
- Usa clases base sin prefijo para estilos móviles
- Agrega clases sm: para mejorar en tablet
- Agrega clases md: para optimizar en desktop
- Prueba en múltiples tamaños de pantalla
Buenas prácticas
1. Estructura semántica
Usa elementos HTML5 semánticos siempre que sea posible:
<header></header>
<nav></nav>
<main>
<article></article>
<section></section>
<aside></aside>
</main>
<footer></footer>
2. Consistencia en espaciado
- Usa .mb-0 en el último elemento de contenedores para evitar espacio extra
- Mantén espaciado consistente: gap-4 para grids, p-6 para tarjetas
- Usa my-6 o my-8 para separar secciones principales
3. Jerarquía visual
- Usa h1 solo una vez por página
- Respeta el orden jerárquico: h1 > h2 > h3
- Combina tamaños con pesos: text-4xl + font-bold para títulos
4. Componentes reutilizables
Crea patrones consistentes para elementos comunes:
<!-- Tarjeta estándar -->
<article class="bg-white border rounded-lg p-6 mb-6">
<h3>Título</h3>
<p class="mb-4">Contenido</p>
<button class="w-full">Acción</button>
</article>
5. Responsive por defecto
- Piensa mobile-first en cada componente
- Usa grid responsive para layouts adaptativos
- Prueba en múltiples tamaños antes de publicar
6. Accesibilidad siempre
- Todos los inputs deben tener labels asociados
- Usa atributos ARIA cuando sea necesario
- Mantén contraste de color adecuado
- Prueba navegación con teclado
7. Optimización de rendimiento
- Minimiza el uso de clases innecesarias
- Aprovecha los estilos base de elementos HTML
- Usa .container para limitar anchos y mejorar legibilidad
Ejemplo completo
<main class="container my-8">
<section class="bg-white p-6 rounded-lg mb-6">
<h2 class="text-primary mb-4">Título de sección</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre">
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email">
</div>
</div>
<button class="mt-4">Enviar</button>
</section>
</main>
Resumen
M.CSS es un framework minimalista pero completo que proporciona todas las herramientas esenciales para construir interfaces web modernas y accesibles.
Ventajas principales
- Peso mínimo de 10KB sin comprometer funcionalidad
- Sistema de espaciado consistente y escalable
- Responsive mobile-first con breakpoints prácticos
- Accesibilidad integrada en todos los componentes
- Fácil personalización via variables CSS
- Sin dependencias externas
Para empezar, incluye el archivo CSS en tu proyecto y comienza a usar las clases utilitarias. M.CSS está diseñado para ser intuitivo y fácil de aprender, permitiéndote construir interfaces rápido sin sacrificar calidad.