FRAMEWORK CSS

¿Qué es un Framework?

Es el esquema o estructura que se establece y que se aprovecha para desarrollar y organizar un software determinado. Esta definición, algo compleja, podría resumirse como el entorno pensado para hacer más sencilla la programación de cualquier aplicación o herramienta actual.

Este sistema plantea varias ventajas para los programadores, ya que automatiza muchos procesos y además facilita el conjunto de la programación. Es útil, por ejemplo, para evitar el tener que repetir código para realizar funciones habituales en un rango de herramientas, como puede ser el acceder a bases de datos o realizar llamadas a Internet. Todas estas tareas son las que se realizan de forma mucho más fácil cuando se trabaja dentro de un framework.

¿Qué es responsive design?

Responsive Web Design o también conocido como Diseño Web Adaptable, es una técnica de diseño y desarrollo web que mediante el uso de estructuras flexibles (contenedores flexibles, imágenes y video flexibles) y junto con Media Queries especificados en CSS, logran adaptar un sitio web al entorno del dispositivo en el que se encuentre. Con ésta técnica se consigue que el contenido del diseño de tu sitio se vea bien y pueda ser bastante legible para los usuarios sobre el dispositivo con el que éste interactúe.

Ventajas y desventajas de un Framework

Ventajas

1. Agilización del proceso de desarrollo
2. Facilita la funcionalidad en diversos navegadores
3. Te permite trabajar con layout simétrica
4. Refuerza buenos hábitos de diseño

Desventajas

1. Limita tu libertad
2. Añade código extra
3. Te fuerza a usar la semántica propia de la framework
4. Podría ser una pérdida de tiempo

Frameworks más utilizados

Framework	Descripcion y componentes necesarios	Ventajas	Desventajas
Bootstrap	Es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.	Componentes suficientes y configurables para cualquier proyecto. Enorme apoyo de la comunidad, con muchas extensiones y preguntas resueltas en foros. Documentación clara y rápida de consultar. Proyecto maduro con una larga trayectoria (7 años). Su Reset CSS (llamado Reboot), te permite usarlo de forma independiente al propio Bootstrap.	Multitud de dependencias, necesitas enlazar 4 archivos diferentes (3 de ellos Javascript). Complejo a la hora de modificar sus estilos. Te obliga a maquetar con un HTML poco flexible. La última versión (v4) da un giro duro. Pierde compatibilidad con versiones anteriores y navegadores que no usen Flex (Safari 10, iOS6, IE8, IE9…).
Tailwind	No es un kit UI, ni tiene un tema por defecto, ni componentes ya hechos (como Bootstrap o Bulma). Tú creas las interfaces a partir de las clases que te proporciona o con las clases que se generen a partir de sus plugins (si instalas alguno), lo cual me parecía muy interesante.	Solo clases de CSS, el HTML a tu gusto. Transparente. Puedes incorporarlo a un sitio que ya tenga otro Framework CSS sin alterar ni un pixel del diseño original. Puedes filtrar por los estilos que necesite tu web. Sin un tema molesto que de un aspecto al sitio, no hay necesidad de sobrescribir nada. Al estar todo en variables CSS, puedes usar nativamente @apply para mejorar los tuyos.	Duro para iniciados. Si no controlas el peso, con PurgeCSS o desactivando módulos, llegará a ser pesado (298,8kb). La documentación tiene zonas sin terminar. Esta construido en Javascript, lo que conlleva que sea más complejo para la comunidad realizar aportaciones al repositorio.
Bulma	Cuando se presentó al público web, su popularidad alcanzó rápidamente los primeros puestos de Hacker News (el foro más popular entre desarrolladores). Y no solo en una ocasión, sino en dos. Adelantó al titánico Bootstrap jugando en su propio terreno utilizando Flex en su núcleo. Modernizó el sistema de maquetación para usar el potencial de los nuevos estándares. Por otro lado nos regaló un diseño precioso y cuidado en cada pixel.	Diseño exquisito. Detrás hay un gran diseñador Web como Jeremy Thomas. Fácil de personalizar. Sin Javascript, aunque varios ejemplos por si quieres complementar. Guía para migrar desde Bootstrap. El código esta en un SASS preciosamente bien ordenado.	La Documentación no es cómoda. Necesita un buscador urgentemente. El contenedor no siempre se comporta como esperas. No dispone herramientas para dar espacios como paddings o margins. Comparado con Bootstrap o Semantic UI, podría tener muchos más componentes y opciones. No resetea correctamente algunos estilos.
Semantic UI	Aunque en apariencia parece estar más enfocado a smartphone, con su estilo plano e integración con los grandes Frameworks de Javascript, es perfecto para cualquier sitio. Sea una web pequeña o grande. Al igual que Bootstrap, hace gran uso de JQuery para activar y manipular sus componentes.	Animaciones integradas. Interfaz moderna. Una cantidad inmesa de componentes: rating, varios tipos de menús (como desplegables en lateral), varios modales, dimmers… Integración oficial con los Frameworks de Javascript más populares: React, Meteor, Ember, Angular… Integración con herramientas como Gulp o Node.	Necesitas enlazar 3 archivos diferentes. Gran dependencia de Javascript. Todo tiene un aire orientado a Smartphone.