Marcos CSS mínimos: 10 excelentes opciones

Cuando alguien menciona la frase marcos CSS , para muchas personas, lo primero que les viene a la mente es Bootstrap, Tailwind CSS o Semantic UI. Me parece bien. Todos son marcos increíbles para construir estructuras de diseño complejas y profundas.

Pero, en términos generales, dichos marcos están destinados a proyectos en los que el diseño transcurre en varias páginas. Para un proyecto simple (cartera, blog, páginas de currículum), un marco que tiene un tamaño de paquete de más de 50 kb parece un poco excesivo.

¿Por qué elegir un marco CSS mínimo?

Creo que una de las tendencias que están ocurriendo en el desarrollo web moderno en este momento es que a los desarrolladores simplemente no les importa el tamaño de página de sus diseños finales. El tamaño promedio de una página web hoy en día es de alrededor de 2,5 Mb una vez que todo el JavaScript ha terminado de procesarse. Es un poco loco, por decir lo menos. Actualización: el nuevo informe Almanaque muestra que este número ha seguido aumentando desde 2021 hasta 2022.

Para mí, un marco CSS liviano me brinda las herramientas para crear mis contenedores principales, asignarles algunos elementos y luego puedo concentrarme en el estilo personalizado si lo necesito. No necesito quedarme atrapado con reglas y opciones de diseño que nunca usaré en la práctica.

Y como dije antes, el tamaño del paquete para los marcos modernos puede ser absurdamente alto.

Este ejemplo de tamaño de paquete es relevante en el contexto de obtener el marco directamente a través de un CDN. Por lo general, es posible reducir el tamaño de los marcos más grandes a algo mucho más modesto. Pero, listo para usar, un marco como Tailwind CSS o Bootstrap no pretende ser mínimo o liviano de forma predeterminada.

De hecho, el tamaño del paquete sin comprimir de Tailwind CSS es de 3,5 Mb .

Las principales ventajas de los marcos ligeros.

Además de las mejoras directas en el rendimiento, ¿cuáles son otras razones para usar marcos CSS más pequeños? Personalmente, me encanta la idea de usar un marco que me brinde acceso rápido a diseños predefinidos y componentes de estilo adicionales. Todo sin necesidad de hacer gimnasia de código para que el diseño funcione en múltiples dispositivos.

Además, un marco más pequeño tiene una curva de aprendizaje mucho más indulgente. En particular, si recién comienza a diseñar las cosas usted mismo, un marco liviano lo ayuda a comprender cómo se combina el diseño en un nivel básico.

Y no tener que depender de JavaScript también es muy útil. Por último, pero no menos importante, es mucho más fácil agregar CSS personalizado a una base de marco pequeña debido a que no hay interferencia de clase. Cuando no tiene miles de clases diferentes que dependen unas de otras, es mucho más fácil agregar fragmentos de CSS personalizados que encuentra en tutoriales o en sitios como CodePen.

Pongámonos manos a la obra entonces.

Puro

La declaración de la misión de la biblioteca Pure.css es encantadora: "Incluya solo la configuración absolutamente necesaria para reducir la sobrecarga en cascada". . En la práctica, esto se convierte en una sintaxis que es fácil de entender, pero también fácil de diseñar. Como primera biblioteca móvil, es un placer absoluto trabajar con ella. Y tiene una amplia disponibilidad de consultas de medios prefabricadas.

Si observa la sección Diseños en los documentos. Los ejemplos proporcionados allí muestran cómo puede crear un diseño de blog funcional en solo 100 líneas de HTML.

Y, debido a la naturaleza modular, la cuadrícula receptiva incluida hace que el diseño sea compatible con dispositivos móviles desde el primer momento. Es un gran marco de inicio para cualquier persona que se inicia en CSS.

Chotá

Jenil Gogari ha realizado bastantes contribuciones notables de código abierto. Y el micromarco Chota no es una excepción. No solo es liviano, sino que tampoco utiliza preprocesadores, por lo que es muy sencillo comenzar con él. Además, me encanta que Chota implemente variables :root para definir el esquema de diseño general.

Por supuesto, las variables han existido desde hace un tiempo. Sin embargo, los marcos CSS más antiguos que no se han actualizado en 2 o 3 años simplemente no los tienen implementados de forma predeterminada. Entonces, en ese contexto, usar Chota se siente muy bien si ya estás familiarizado con el concepto.

En términos de estilo, Chota se destaca con su intrincado diseño de cuadrícula. Las columnas se etiquetan por separado (12 en total), lo que le permite iniciar un diseño de varias capas en minutos.

Picnic

¡Picnic tiene todo lo que necesitas de un marco CSS pero en un tamaño compacto! La biblioteca está escrita con el preprocesador SCSS y, de forma predeterminada, se basa en variables. Además, la naturaleza modular significa que puede elegir los elementos de diseño que necesita.

Y, por supuesto, debido a que Picnic emplea clases de marcador de posición, tiene total libertad para diseñarlo usted mismo. Con un poco más de 3500 estrellas en GitHub, es el marco de referencia mínimo para proyectos personales y diseños simples.

esqueleto

Skelet (que no debe confundirse con Skeleton ) es un marco CSS de bloques de construcción con énfasis en módulos específicos. También está escrito completamente en CSS moderno, utilizando variables, tipografía fluida y tipos de datos para sustituir el uso de JavaScript.

Como el autor implica, es un marco completamente funcional listo para ser utilizado en producción.

Las características notables incluyen animaciones integradas, tanto Flexbox como Grid, y también una demostración de casi una docena de diseños personalizados. Si te gusta WordPress, el autor ha creado una plantilla repetitiva separada para estructurar un tema basado en este marco.

Miligramo

Parece que CJ Patoilo (el autor) está atrapado en la vida ya que su perfil de GitHub se ve un poco sombrío durante los últimos 2 años. Sin embargo, debido a que Milligram es un marco completo , es más que funcional y utilizable para la creación rápida de prototipos de diseño.

Más importante aún, solo tiene 2kb cuando está completamente comprimido.

Sin embargo, es posible que se pregunte: "¿Qué obtengo por solo 2 kb?" . Y la respuesta es: prácticamente todo lo que necesita para diseñar un sitio web personal. Se incluye Grid, al igual que elementos como encabezados, formularios, tablas, flotantes y formas de mostrar la sintaxis del código.

Espectro

Yan Zhu, el autor de Spectre, ha hecho algunas contribuciones increíbles a la comunidad de CSS. Y el marco Spectre también es uno de sus mejores trabajos. A pesar de haber existido durante años, Spectre logra generar alrededor de 1,000 descargas diarias en npm.

Entonces, ¿de qué se trata el marco? Se basa en el concepto de ser una base de diseño liviano, con un enfoque en el uso de Flexbox para la capacidad de respuesta. A diferencia de soluciones barebones similares, los componentes de Spectre están diseñados a medida para proporcionar un sentido de personalidad al diseño.

Y con la cantidad de componentes disponibles, puede seguir adelante y usar Spectre para crear cualquier cosa, desde páginas de destino hasta interfaces de aplicaciones. ¡Consulte los documentos para ver una demostración en vivo!

Interfaz de usuario mostaza

No todos los marcos están construidos para superar problemas difíciles. De hecho, aunque Mustard UI es una biblioteca liviana, se trata más del estilo de diseño que proporciona.

El objetivo es tener una base de inicio sólida (modular) que se pueda usar para crear prototipos de diseños limpios. Así es como está estructurada la interfaz de usuario de Mustard. Si necesita funciones adicionales, puede personalizarlas usted mismo. En los documentos, encontrará muchos ejemplos alojados en CodePen.

Y, por último, pero no menos importante, Mustard UI también tiene soporte completo para utilidades. Se puede establecer un tema general antes de comenzar a trabajar utilizando variables predefinidas.

Bonsái

Bonsai proporciona tanto componentes básicos como clases de utilidad. Solo el estilo base por sí solo es suficiente para producir interfaces creativas y con estilo. El marco no interfiere con las clases personalizadas, por lo que de hecho puede aplicar Bonsai a una página HTML existente (sin estilo).

Esto dará como resultado que su página se transforme con todas las especificaciones del estilo Bonsai.

En cuanto a los servicios públicos, Bonsai lo supera por completo. Hay alrededor de 100 clases de utilidad personalizadas incluidas en el marco. Cada clase le brinda la libertad de agregar estilos personalizados y características de diseño adicionales.

Y la mayoría de esas clases son totalmente compatibles con las consultas de medios: receptivas.

Iluminado

¿Qué tan pequeño puede ser un marco, realmente? Como resultado, muy pequeño . El marco "iluminado" listo para producción tiene solo 400 bytes . Y, sin embargo, ofrece herramientas integrales para poner en marcha un diseño de sitio web receptivo. El marco en sí se enfoca en proporcionar una interfaz de cuadrícula receptiva, pero también agrega algunos elementos comunes como tarjetas, listas y diseño de tablas.

Sin embargo, puede ir un paso más allá con la extensión "util". Las utilidades (1kb) incluyen varias adiciones de componentes y opciones de espaciado. Con todo, el marco iluminado es una opción excepcional para un marco de inicio. Y el rendimiento es inigualable.

linda correa

Bootstrap pero más lindo ? ¡Eso es Cutestrap! Aunque el marco no ha visto mucho amor (nuevas versiones) en los últimos años, es completamente funcional. Cutestrap está repleto de elementos HTML personalizados, pero también agrega soporte para temas, tipografía avanzada y guías de estilo personalizadas.