Los frameworks de diseño ofrecen un esqueleto basado en columnas que facilita mucho la tarea de construir una web que se adapte a cualquier dispositivo. 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.
Frameworks de diseño web
Hoy en día existe en el mercado una amplia variedad de frameworks de diseño web responsive que nos ayudan a implementar nuestras interfaces gráficas. Algunos de los frameworks más utilizados son los siguientes.
- Bootstrap (http://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 Less.
- Materialize CSS (https://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 (http://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 (http://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 (https://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.
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!