blog
Css Desarrollo Opinión

Frameworks y Boilerplates de CSS

 Ahorrar  tiempo siempre ha sido una necesidad en cualquier área de la vida. En el desarrollo web pasa lo mismo, pues los 'deadlines' son los que son.  Una forma de ahorrar el tiempo es aprovechar herramientas programadas y previamente testadas para solucionar problemas comunes y que pueden ser utilizadas para ayudarnos a resolver nuevos problemas.

Un 'framework', en este contexto sería  un paquete de ficheros y directorios con código (HTML, CSS, JS, etc…) estandarizado que nos puede ayudar a desarrollar sitios web.

Es cierto que muchos sitios web comparten una estructura similar. Utilizando los 'frameworks'  podemos crear estos sitios sin empezar de cero y nos permite reutilizar el código. De esta forma se ahorra tiempo y se obtienen resultados muy interesantes.

Hay un número importante de 'frameworks' (backend y frontend) en la red.  Algunos 'frameworks frontend', son  muy completos a nivel de estructura, pero sencillos de utilizar para el desarrollo. Son interesantes, pues ya vienen con una estructura de CSS/HTML estándar y solo hay que adaptar al diseño del website en cuestión. Y es más, los mejores son 'responsive'.

Como siempre, el tipo de proyecto define la necesidad y digamos que hay 'frameworks'  para todos los gustos, desde el más simple al más complejo.

Os dejo algunos ejemplos de Boilerplates y Frameworks, entre muchas otras buenas opciones:

Skeleton

Se definen como “un bello boilerplate para el desarrollo adaptativo y mobile-friendly”.  Está construido en un grid de 960 y se escala a resoluciones diferentes de pantalla, móviles y tablets.

Foundation

“El framework frontend  responsive más avanzado del mundo”. Bueno, esto es lo que dicen en su página web. Lo cierto es que Foundation es un framework avanzado, ligero, 'responsive' de grid de 12 columnas y que permite crear 'layouts' complejos sin la necesidad de personalizar demasiado.

Less Framework

“Sistema de CSS de grid adaptativo”. Less Framework está preparado para cuatro 'layouts',  'default', 'tablet', móvil y dispositivos móviles largos.  Los 'media queries' de CSS3 sirven layouts de 768,480 y 320px.

Bootstrap

¿Uno de los 'frameworks de frontend' más utilizados ahora mismo? Bootstrap es un framework “’elegante’, intuitivo y potente para el desarrollo web más rápido y más fácil”. Utiliza un sistema 'responsive' de 'grid' de 12 columnas y numerosos componentes, 'plugins de JavaScript' y estilos, incluyendo la tipografía. Bootstrap permite personalizar las características y 'plugins de JavaScript' a través de su herramienta Customizer.

Un 'framework' muy completo o complejo a veces puede parecer atractivo por todo lo que permite hacer sin gran esfuerzo, pero si nuestra web ya lleva una buena carga de código desarrollado, utilizarlos puede complicar en lugar de ayudar, pues puede haber incompatibilidad entre los 'snippets' de 'JQuery' o incluso en el CSS, sobretodo en los formularios.  Antes de tomar la decisión es importante cuestionarse  lo que realmente buscamos , ¿si requerirá grid? Será fijo o fluído, o si es  o no semántico.

Fuentes:

http://html5boilerplate.com/
http://goo.gl/sQ0NmN
http://goo.gl/pYRJhu

Pixel perfect y Web development

Artículo anterior

Visualización de datos: D3.js

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Los mejores software para gestión de proyectos

3 Herramientas DevOps

Maquetar en Drupal 7: Funciones del Tema

CodyHouse