En el creciente mundo de Internet se ha vuelto muy común encontrar framework css en gran cantidad, pero también es cierto que se requiere de cierto conocimiento para poder utilizar uno y al existir variedad comienzan a surgir preguntas como: ¿Cuál es el que debe utilizarse?, ¿Con cuál debo empezar?, ¿Por qué debo utilizarlo?. Estas son algunas preguntas que nos hacemos al escoger un framework y las preguntas crecen más si es la primera vez que debemos utilizarlos.
Esta guía la realizo a base de experiencias propias en el desarrollo y en lo que considero ventajas en tiempos de entrega y situaciones donde la calidad es necesaria sin disponer de tiempo.
Esta sería la primera pregunta que debemos hacernos, en realidad con css puro podemos hacer cosas realmente increíbles, si bien css por si solo es fácil de utilizar en la práctica se puede volver realmente costo en términos de tiempo. Tomando por ejemplo hacer un menú superior con submenús o un menú lateral que sea desplegable, si comenzamos por lo más básico necesitamos primero definir la estructura en HTML, luego necesitamos realizar un bosquejo ó de preferencia el diseño de cómo debe verse una vez terminado, luego comenzar a maquetar hasta tener el css y HTML funcionando sin problemas, por último en algunos casos debemos realizar la animación con javascript o jquery que es mucho más fácil, una vez terminado todo, ya habremos tomado 1hr o mas de tiempo en lo que es solo una sección del sitio, aunque debo decir que existen personas muy hábiles que realizan esta tarea en menos de una hora y con detalles. Pero supongamos que no es nuestro caso,aquí es donde entran los frameworks la mayoria estan hechos para ahorrarnos tiempo y disponer de una librería de clases fáciles de utilizar, tomando el ejemplo anterior esta tarea nos tomaría 5 minutos en lo que buscamos la documentación y agregamos el código, casi siempre cuando son sitios para el cliente final, trabajamos con un diseño ya hecho, ya sea en illustrator o en photoshop aún así disponer como base un framework es recomendable en mi caso me permite solo agregar estilos donde se requiera y seguir la estructura sin problemas, esto nos ahorra tiempo y agrega una mejor calidad al sitio entre otra cosas.
Antes de preguntar ¿cuál debo utilizar?, debemos de considerar que necesitamos saber para poder utilizar uno, principalmente debemos de conocer de preferencia css a un nivel intermedio y por supuesto HTML correctamente, recuerdo bien cuando trate de utilizar bootstrap (framework liberado por twitter) sin dominar css, me fue mal porque no sabía como colocar correctamente un div a la par de otro, al no saber cómo funcionaban los grid en bootstrap se complico aun mas. Es recomendable que al menos domines términos como flotar contenedores, posiciones absolutas, relativas y z-index que seria colocar una capa sobre otra capa según su prioridad.
El segundo concepto que también es bueno comprender es el de la distribución en pantalla, un diseño fluido por lo general utiliza un contenedor central con un tamaño máximo de 960px que puede contener varios div en su interior, por ejemplo 12 contenedores que se les llamaría 12 columnas con un ancho de 80px cada uno, se utiliza 960px porque puede ser dividido dentro varios múltiplos de 2, lo más común es dividirlo dentro de 12 columnas y 16 columnas, de esta manera se puede tener un sidebar que utilice 3 columnas y el contenido que ocupe 9 columnas sin perder la fluidez en pantalla, en la imagen de abajo puedes ver como realizar una distribución de las columnas con foundation css.
Considerando todo lo anterior aun así es difícil decidir cual utilizar, por lo que debemos de considerar otros aspectos basándonos en lo que nuestro proyecto necesita, los criterios más comunes son:
Si analizamos bien los puntos anteriores primero debemos ver si el estilo que posee el framework se adapta a nuestro proyecto, por lo general se tiene un diseño con el cual trabajar, pero la apariencia es lo que al final el cliente va a apreciar por eso considero que es adecuado analizar bien cuál utilizar, la configuración en la mayoría de frameworks es fácil de hacer pero no esta de mas verificar bien, por ejemplo si se debe agregar muchas etiquetas HTML para hacer funcionar el componente o en algunos caso puede que también utilice javascript para generar las etiquetas, en la práctica debemos de modificar la estructura HTML por lo que esto lo considero también necesario porque podemos perder tiempo en encontrar donde hacer la modificación.
Javascript es tan necesario en la actualidad que nos permite realizar animaciones increíbles y utilizando jquery lo hace relativamente fácil, la mayoría de framework también disponen de una serie de componentes que utilizan javascript lo que los hace aún más potentes, y si necesitamos animaciones ¿porque no utilizarlas?.
También es necesario saber cómo funciona el framework, por eso es necesario tener la documentación a la mano, esto lo considero importante porque podemos llegar a pasar horas buscando como utilizar un componente o tratando de resolver un problema porque no sabemos como configurar correctamente el componente.
Por último, sabemos muy bien que los teléfonos inteligentes están por todas partes y no podemos ignorar que gran parte de los usuarios los utilizan para navegar, y que el framework sea responsive facilita enormemente el trabajo, casi siempre adaptar un sitio para que sea responsive es tedioso, pero tener un framework responsive es de gran ayuda.
Existe una gran cantidad de framework en internet, que es difícil probarlos todos a profundidad por eso dejaré una lista de los que yo considero útiles en la práctica.
Espero que esta guía te sea de utilidad, si conoces alguno que quieras recomendar no dudes en comentar.
