Frameworks Front-end

¿Recuerdas aquellos layouts basados en tablas?

Carlos Ruiz Re
Blog de Interactius UX
3 min readSep 17, 2013

--

De eso hace ya más de una década… El desarrollo en Front-end ha cambiado mucho desde entonces; de hecho, por fin existe como tal. Por suerte para nosotros existen multitud de personas, organizaciones y empresas que quieren facilitar la vida al desarrollador y que han ido creando estos frameworks para el desarrollo de Front-end. Actualmente existen muchísimos y bastante variados: ya no funciona aquello de que todas las webs se van a parecer a Twitter Bootstrap.

Seguro que ya muchos usáis alguno, pero os dejamos aquí una pequeña muestra de los frameworks más interesantes:

Bootstrap 3

Captura de pantalla Bootstrap

Bootstrap es el framework por excelencia. Creado por dos cracks currantes en twitter, Mark Otto y Jacob Thornton (aka @mdo and @fat), este potente e intuitivo framework justo llega a su nueva y reluciente versión 3. Está creado para ser crossbrowser y ofrece una gran cantidad de funcionalidades de Javascript. Se integra completamente con jQuery y como cualquier fw que se aprecie está construido en LESS y HTML5/CSS3. Permite crear layouts adaptables a los diferentes dispositivos y resoluciones.

Recursos:

Foundation 4

Captura de pantalla Foundation

Foundation es un muy potente framework completamente responsive, que dispone de muchas funcionalidades y multitud de widgets y plugins. Puedes usar cualquiera de sus múltiples estructuras de layout para construir desde mockups interactivos hasta aplicaciones web enteras. Usa SASS para dar estilo a los típicos elementos como formularios, listas, tablas, thumbs… y usa Zepto en vez de jQuery, una librería de Javascript no tan famosa como jQuery, pero igual de válida y hasta más rápida.

Para rizar el rizo, Foundation ofrece una serie de add-ons para completar sus funcionalidades.

Recursos:

UI Kit

Captura de pantalla de Uikit

UIKit es un nuevo, aún poco conocido y muy interesante framework desarrollado por la gente de YOOtheme. Realmente es muy completo: está desarrollado con LESS y HTML5/CSS3 y es responsive, trae multitud de plugins en jQuery y una colección de elementos maquetados que no tiene nada que envidiar a sus hermanos mayores. Hay que hacer una mención especial a su “Customizer” (Bootstrap y Foundation también nos permiten customizar) que por defecto nos trae tres look’n’feel distintos para escoger y cómo no, gracias a LESS podemos customizar casi cualquier aspecto del framework.

Recursos:

HTML5 Boilerplate

Captura de pantalla Boilerplate

En sí, HTML5 Boilerplate no es un framework, es como una plantilla que nos ayuda (y mucho) a empezar nuestros proyectos de desarrollo web. En su suficiente documentación nos explican para qué sirve cada archivo incluido en su completa estructura de directorios; desde el robots.txt hasta el htaccess. Obviamente se basa en HTML5 para crear todo el markup que, aunque no lo usemos, vale la pena echarle un ojo para ver una DOM 100% completa y correcta. Incluye Modernizer y jQuery a través de la CDN de Google.

Recursos:

A parte, os dejo algún enlace a otros frameworks. Son más sencillos, pero si lo que queréis únicamente es una estructura básica, seguro que os pueden ayudar.

--

--