FRAMEWORK CSS

• QUÉ ES UN FRAMEWORK?

La palabra inglesa "framework" (marco de trabajo) define, en términos generales, un conjunto estandarizado de conceptos, procticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.

Los frameworks se utilizan en el ámbito de la programación desde hace décadas. Recientemente han comenzado a utilizarse para programar y deseñar aplicaciones web, por lo que ya existen decenas de frameworks para CSS.

Genéricamente, un framework CSS es un conjunto de herramientas, librerías, convenciones y buenas prácticas que pretenden encapsular las tareas repetitivas en módulos genéricos fácilmente re utilizables. 

De la misma forma, un framework CSS es un conjunto de herramientas, hojas de estilos y buenas prácticas que permiten al diseñador web olvidarse de las tareas repetitivas para centrarse en los elementos únicos de cada diseño en los que puede aportar valor.

• QUÉ ES RESPONSIVE DESING?

Esta técnica es una de las más utilizadas en la actualidad, permitiéndonos hacer que nuestros sitios web puedan adaptarse a cualquier dispositivo móvil o desktop.

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ágnes y video flexibles) y junto con Media Queries especificados en CSS, logran adaptar un sitio web al entorno del dispositivo con el que éste interactúe.

• VENTAJAS Y DESVENTAJAS DE UN FRAMEWORK
• Las principlaes ventajas que nos aportan son la siguientes:
• Acelerar el desarrollo de las páginas web, ya que conociendo un poco el framework CSS, se pueden desarrollar las páginas de una manera más rápida que si lo hacemos desde cero.
• Facilita el trabajo en equipo, ya que si hemos desarrollado una página y sus estilos usando un framework, si posteriormente otra persona necesita modificarlos y conoce ese framework, puede mantener la misma línea de desarrollo de las hojas de estilo y esa página web.
• Garantiza que todo lo que se desarrolle sea compatible con todos los navegadores, lo que si tuviéramos que hacer nosotros mismos supondría más tiempo y esfuerzo.
• Los frameworks son mantenidos y evolucionados por la comunidad, por lo que los posibles errores son corregidos y sus funciones van ampliándose.
• A la hora de utilizar un framework no todo son ventaja, ya que hay una serie de desventajas que hay que tener en cuenta. 
• Al emplear un framework estamos utilizando muchos estilos y muchas librerias y no las estamos empleando todas . Este uso de una gran cantidad elementos hace que nuestra página web pese más y tarde más en descargarse.
• Si utilizamos un framework CSS, salvo que lo personalicemos, lo que requiere más conocimientos, nuestra página web se va a parecer muco a millones de páginas web diferentes que se han hecho con el mismo framework.
• Un framework CSS tiene una curva de aprendizaje, por lo que si queremos utilizarlo primero tenemos que aprender a hacerlo.
• Otra desventaja muy importante, aunque pueda no parecerlo, es que si utilizamos famework sin haber aprendido css, no vamos a saber hacer cualquier modificación sin el framework, ya que vamos a desconocer la vase sobre la que funciona.

• ¿CUÁLES SON LOS FRAMEWORK CSS MÁS UTILIZADOS?

Framework	Descripción y Componentes necesarios	Ventajas	Desventajas
Boobstrap	Proporciona una gran cantidad de componentes y estilos preestablecidos, un grid responsive de 12 columnas para que organices los componentes de tu sitio web, y una documentación extensa, clara y completa.	1. soportado por la mayoría de navegadores 2. Framework apoyado por una gran comunidad de desarrollo detrás. 3. Muchas plantillas y componentes disponibles están creadas en Boobstrap	1.Utiliza clases CSS no semánticas que “ensucian” tu HTML. 2.Tiene la necesidad de utilizar jQuery. 3.Si no personalizas tu sitio, se parecerá a muchas webs que utilizan este framework, debido a que es el framework más utilizado en estos momentos.
Foundation	Actualmente la Adopción de este Framework no es tan alta como lo es la de Boobstrap, pero esto no significa que Foundation no sea un Framework CSS a tener en cuenta	1.Gran cantidad de componentes muy personalizables. 2.Extensa y detallada documentación con tutoriales en vídeo en algunas secciones. 3.Las clases CSS utilizadas son semánticas, por lo que no ensucian tu HTML.	1.La comunidad de Foundation no es tan grande como la de Bootstrap. 2.No hay tantos recursos externos disponibles para Foundation. 3.Es más complejo que otros frameworks disponibles.
Bulma	Es un Framework de desarrollo relativamente nuevo. pero ya ha capturado la atención de un gran número de desarrolladores, Bulma CSS se centra en crear un framework css ligero y simple utilizando flexbox para su sistema de rejilla.	1.Una sintaxis semántica, hace que nuestro código sea más comprensible. 2.Es un framework ligero, por lo que tu web se verá recompensada a la hora de cargar con rapidez. 3.Fácil de usar. 4.Muy personalizable y modular, con la posibilidad de exportar solamente los componentes que necesites. 5.Un grid responsive basado en flexbox.	1.Al ser relativamente nuevo la comunidad que lo apoya no es muy grande, pero crece con fuerza. 2.Debido a su temprana edad falta corregir algunos bugs. 3.No es una buena opción para navegadores Internet Explorer(pero a quién le importa Internet Explorer).
Milligram	Tiene un estilo minimalista y limpio, dice tener un tamaño de solo 2kb, su objetivo es ofrecer un rendimiento alto debido a su tamaño, con una alta productividad, al no tener la necesidad de añadir muchas clases a los elementos HTML para aplicar los diferentes estilos disponibles.	1.Un diseño limpio y minimalista. 2.Tamaño de solamente 2 kb.	1.Falta de personalización en los elementos. 2.Comunidad pequeña.
UIKit	Tiene un tamaño pequeño, modular, como lo es Bulma CSS y con un estilo minimalista y limpio. UIKit es una buena opción, a tener en cuenta cuando se trata de frameworks.	1.Modular. 2.Un tamaño ligero. 3.Aspecto cuidado sin necesidad de añadir tu propio CSS. 4.Muy Personalizable.	1.La nomenclatura de las clases no es muy elegante. 2.Falta de una comunidad más grande.
Semantic UI	Está enfocado en un código de programación legible para el programador.	1.Carga solamente los elementos que necesitas. 2.Amplia gama de elementos muy personalizables. 3.Clases realmente semánticas. 4.Diseño elegante.	1.Un tamaño de archivos demasiado grande comparándolo a su competencia. 2.Uso excesivo de Javascript.
Materialize	Si el proyecto en el estamos involucrados, se desea un diseño al estilo material design como el que tiene Android, no hay ninguna duda de que tu elección debe se el framework CSS Materialize.	1.Gran librería de componentes con un diseño Material Design. 2.Facilidad de uso. 3.Buena documentación.	1. Un Tamaño de archivos grande
Pure.css	Para diseños web simples una de las opciones disponibles es Pure.css. Todos sus componentes tienen como denominador común la simplicidad, lo que no es por todos los públicos, pero no hay duda que si se busca una opción con un tamaño reducido y un estilo sencillo, Pure.css es un buen candidato	1. Una fácil personalización 2. Un tamaño ligero	1.Documentación un poco confusa. 2.Falta de estilos en sus componentes, esto puede ser una ventaja o desventaja, depende del gusto de cada uno.