Al crear un sitio web, usar un CSS Framework es un ahorro de tiempo real, ya que proporciona las herramientas que todo diseñador web y desarrollador de front-end necesita cuando elabora una web.
Un CSS Framework es un entorno o conjunto de tecnologías CSS que ayudan a un mejor desarrollo de sitios web de modo más fácil y más compatible con los estándares mediante HTML / CSS.
Muchos CSS Frameworks populares están orientados al diseño y contienen elementos que pueden reutilizarse en la creación de cualquier sitio web o aplicación, así como un sistema de cuadrícula diseñado para proporcionar un diseño CSS responsive.
Todos los frameworks enumerados en este artículo son gratuitos y de código abierto.
Bootstrap
Sin lugar a dudas, Bootstrap es el CSS Framework de código abierto y gratuito más utilizado. Creado en 2011 por los desarrolladores Mark Otto y Jacob Thornton, Bootstrap ahora es utilizado por millones de sitios web.
Bootstrap presenta variables Sass y mixins, un sistema de grid responsive, amplios componentes precompilados para crear diseños y potentes complementos creados en jQuery.
Bootstrap es una de las mejores herramientas cuando se trata de crear sitios web responsive o una plantilla de WordPress. Es extremadamente fácil de aprender y la documentación es muy completa. Si quieres convertirte en un desarrollador web, aprender Bootstrap es una necesidad.
→ Información y descarga: https://getbootstrap.com/
Pure CSS
Solo 3.8kb comprimido, pero repleto de toneladas de características para todas las necesidades de diseño web.
Creado por Yahoo en 2014, Pure se especializa en proporcionar un conjunto muy ligero de diseños y componentes CSS para que sirvan de base para crear un diseño responsive.
Pure CSS es el framework a elegir si te gusta la tecnología más liviana.
→ Información y descarga: https://purecss.io/
Bulma
Con 21kb minimizado y comprimido, Bulma no es el más liviano de esta lista, pero este CSS Framework de código abierto es tan interesante que merece una mención.
Bulma se construye con un enfoque móvil, lo que hace que cada elemento esté optimizado para la lectura vertical, y su sistema de cuadrícula (grid) está completamente construido con Flexbox.
Lograr un diseño flexible con columnas del mismo tamaño es tan simple como agregar una clase .column a cualquiera de sus elementos HTML.
Bulma también se construye con Sass, que le permite usar solo las funciones que realmente necesita en sus tareas de desarrollo web.
→ Información y descarga: https://bulma.io/
Tailwind
Tailwind es un CSS Framework relativamente nuevo, diseñado para ser diferente de sus competidores.
En lugar de componentes prediseñados, Tailwind proporciona clases de utilidad de bajo nivel que le permiten crear sus propios diseños.
Esas clases le permiten aplicar un estilo fino a cualquier elemento: podemos detectar fácilmente las clases denominadas texto en blanco, negrita y redondeada, definiendo el aspecto visual del botón.
→ Información y descarga: https://tailwindcss.com/
Materialize
Material Design es un lenguaje de diseño creado en 2014 por Google. Utiliza más diseños basados en cuadrícula, animaciones y transiciones receptivas, relleno y efectos de profundidad como la iluminación y las sombras.
A partir de 2019, Material Design se ha implementado en la mayoría de los productos de Google, como YouTube, Gmail, Google Drive y Google Docs.
Materialize es un moderno front-end framework basado en Material Design. Fácil de usar, proporciona componentes, así como plantillas de inicio que le permiten comenzar a diseñar su sitio web con un tiempo de configuración mínimo.
→ Información y descarga: https://materializecss.com/
Mini.css
Mini.css es, como su nombre indica, un framework ligero (7kb comprimido) para crear sitios web rápidos y con capacidad de respuesta fácilmente.
Se sitúa entre los frameworks con todas las funciones como Bootstrap y los frameworks muy pequeños como Pure.CSS, Mini contiene muchas características (responsive grid, componentes …) en un paquete pequeño.
El framework se basa únicamente en CSS moderno, por lo que no tiene que preocuparse por los conflictos de JavaScript y puede decidir libremente qué biblioteca de JavaScript utilizará en su proyecto.
→ Información y descarga:
UIkit
UIkit es un CSS Framework ligero y responsive para desarrollar interfaces web rápidas y potentes.
Consta de CSS y JavaScript compilados, UIKit es fácil de usar y proporciona todas las herramientas necesarias para el diseño web moderno: cuadrícula (grid), iconos personalizados, componentes, animaciones y mucho más. UIKit es compatible con Less y Sass.
→ Información y descarga: https://getuikit.com/
Skeleton
Con solo 400 líneas de código, el Skeleton es liviano como una pluma. Sin embargo, cuenta con un sistema de cuadrícula CSS responsive, tipografía, formularios, consultas de medios… todo lo necesario para crear un sitio de calidad en poco tiempo.
Diseñado como punto de partida para sus proyectos, Skeleton solo incluye estilos de un puñado de elementos HTML y proporciona un sistema de cuadrícula simple pero eficiente.
Como no se requiere compilación ni instalación, este framework liviano facilita la creación de cualquier tipo de diseño responsive.
→ Información y descarga: http://getskeleton.com/
Base
Base es un framework responsive muy simple pero robusto. Construido con un código ligero y mínimo, Base está diseñado para proporcionar a los desarrolladores y diseñadores una forma fácil de crear sitios web y aplicaciones web para múltiples navegadores.
Este framework muy práctico proporcionará una base sólida para crear diseños con calidad y rapidez en poco tiempo.
→ Información y descarga: http://getbase.org/
Spectre
Como punto de partida ligero (~ 10KB gzip) para sus proyectos, Spectre proporciona elementos de diseño elegante, así como un basado en Flexbox, responsive y fácil de usar para dispositivos móviles.
Mucho más pequeño en tamaño y características que los frameworks con todas las funciones como Bootstrap, Spectre es una excelente opción para sitios web de una sola página y aplicaciones web pequeñas.
→ Información y descarga: https://picturepan2.github.io/spectre/
Milligram
Milligram proporciona una configuración mínima de estilos para un punto de partida rápido y limpio. Con solo 2kb gzip, este framework pequeño pero poderoso se encuentra entre los tres primeros lugares de los frameworks ligeros disponibles.
A pesar de su tamaño muy pequeño, Milligram proporciona un conjunto completo de herramientas de desarrollo web y explota completamente las posibilidades que ofrece la especificación CSS3.
→ Información y descarga: https://milligram.github.io/
Dead Simple Grid
Dead Simple Grid no es realmente un framework. Como su nombre indica, esta herramienta sólo consiste en un diseño de cuadrícula simple que se puede usar en cada proyecto.
Con solo 250 bytes de código CSS, Dead Simple Grid será útil para los desarrolladores web que necesitan un sistema grid, sin los componentes que generalmente proporciona un framework más completo.
→ Información y descarga: https://github.com/mourner/dead-simple-grid
Picnic CSS
Con un tamaño de menos de 10kb cuando está comprimido, Picnic es seguro que es liviano, pero también tiene todo lo que necesita para crear un sitio web atractivo y funcional.
Usar Picnic es súper fácil, ya que simplemente puede incrustar la hoja de estilos agregando la siguiente línea en la sección <head> de tu página:
<link rel="stylesheet" href="https://unpkg.com/picnic">
Pequeño pero muy completo, el framework presenta todos los componentes necesarios para la creación de sitios web modernos: cuadrícula, formularios, pestañas, información sobre herramientas, alertas…
Picnic está escrito en Sass / SCSS con muchas variables y clases para facilitar su extensión.
→ Información y descarga: https://picnicss.com/