Los frameworks de diseño ofrecen un esqueleto basado en columnas que facilita la tarea de construir webs que se adapten a todo tipo de dispositivos. Además, ofrecen una serie de clases CSS y funciones de JavaScript que se pueden utilizar directamente y que nos ahorran tiempo a la hora de crear código.
Concepto de framework: Un framework es un esquema o marco de trabajo que ofrece una estructura base para elaborar un proyecto con objetivos específicos, una especie de plantilla que sirve como punto de partida para la organización y desarrollo de software.
Frameworks de diseño web CSS
Hoy en día existe en el mercado una amplia variedad de frameworks de diseño web CSS responsive que nos ayudan a implementar nuestras interfaces gráficas. Algunos de los frameworks más utilizados son los siguientes.
- Bootstrap (getbootstrap.com): este framework, desarrollado por Twitter, es uno de los más populares actualmente. Bootstrap ha sido creado para ofrecer la mejor experiencia de usuario tanto en versión escritorio, como en tabletas y smartphones. Utiliza un grid responsive de 12 columnas y trae integrado decenas de complementos, plugins de JavaScript, tipografías, controladores de formularios, etc. Además, utiliza el preprocesador de CSS Sass.
- Materialize CSS (materializecss.com): es un framework inspirado en Material Design de Google, lo que permite dar un aspecto muy similar a lo que podemos ver en Android o en las páginas creadas por Google. No es tan completo como Bootstrap pero visualmente es muy atractivo y está muy orientado al diseño web responsive.
- Zurb Foundation (foundation.zurb.com): junto con Bootstrap es uno de los frameworks más avanzados que existen en la actualidad. Ha sido desarrollado con Sass, un potente preprocesador de CSS que hace de Foundation un framework personalizable.
- Skeleton (getskeleton.com): ofrece un grid responsive basado en una resolución de 960px que se ajusta al tamaño de los dispositivos móviles. Tiene poco peso e incluye una colección de archivos CSS y JS para facilitarnos el diseño de nuestra web.
- HTML5 Boilerplate (html5boilerplate.com): tal y como los anteriores, ofrece un set de utilidades para construir nuestra web responsive de forma rápida y sencilla, con la ventaja de ser uno de los frameworks que menos ocupan.
- Animate.css (animate.style): es un framework CSS ligero y fácil de usar que permite agregar animaciones a elementos HTML con solo agregar clases. Proporciona una amplia variedad de animaciones predefinidas, desde simples desplazamientos hasta efectos complejos, lo que facilita la creación de sitios web atractivos e interactivos.
- Tailwind CSS (tailwindcss.com): es un framework de diseño CSS que se basa en clases predefinidas para estilizar elementos HTML de manera rápida y sencilla. Permite crear sitios web con una mayor flexibilidad y personalización, ya que no impone estilos predeterminados, lo que lo hace ideal para proyectos con diseño personalizado.
- UIkit: es un framework ligero y modular que ofrece una amplia variedad de componentes y estilos predefinidos para acelerar el desarrollo.
- Bulma: es un framework CSS basado en Flexbox que ofrece una amplia variedad de componentes y estilos predefinidos para acelerar el desarrollo.
Ver estadísticas de uso de cada framework de diseño CSS.
En esta unidad, nos centraremos en Bootstrap por ser uno de los más utilizados. ¡Veamos cómo se instala y cómo funciona esta librería en Bootstrap 4! También puedes ir directamente al tutorial de Bootstrap 5.
Comprueba tu apendizaje