Framework CSS

¿Qué es un Framework?

Un framework, entorno de trabajo​ o marco de trabajo​ es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.

En el desarrollo de software, un entorno de trabajo es una estructura conceptual y tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de software, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio.

Responsive Web Design

En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).

Ventajas de un Framework

Las principales ventajas que nos aporta son las siguientes:

• Acelera 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.

Desventajas de un Framework

A la hora de utilizar un framework no todo son ventaja, ya que hay una serie desventajas que hay que tener en cuenta. Las principales son estas:

• Al emplear un framework estamos utilizando muchos estilos y muchas librerías y no las estamos empleados 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 CCS, salvo que lo personalicemos, lo que requiere más conocimientos, nuestra página web se va a parecer mucho 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 un framework sin haber aprendido CSS, no vamos a saber hacer cualquier modificación sin el framework, ya que vamos a desconocer la base sobre la que funciona.

Frameworks más utilizados

• Boolstrap
• Foundation
• Bulma
• Milligram
• UI
• Semantic UI
• Materialize
• Pure.css
• Kube

Boolstrap

El framework de desarrollo más conocido y más utilizado en la actualidad, este framework 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.

Ventajas

• Bootstrap es soportado por la mayoría de navegadores web.
• Framework apoyado por una gran comunidad de desarrollo detrás.
• Muchas plantillas y componentes disponibles están creadas en Bootstrap.
• Buena documentación.

Desventajas

• Utiliza clases CSS no semánticas que “ensucian” tu HTML.
• Tiene la necesidad de utilizar jQuery.
• 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

Foundation fue durante mucho tiempo, el rival directo de Bootstrap, actualmente la adopción de este framework no es tan alta como lo es la de Bootstrap, pero esto no significa que Foundation no sea un framework CSS a tener en cuenta.

Ventajas

• Gran cantidad de componentes muy personalizables.
• Extensa y detallada documentación con tutoriales en vídeo en algunas secciones.
• Las clases CSS utilizadas son semánticas, por lo que no ensucian tu HTML.

Desventajas

• La comunidad de Foundation no es tan grande como la de Bootstrap.
• No hay tantos recursos externos disponibles para Foundation.
• Es más complejo que otros frameworks disponibles.

Bulma

Bulma CSS es un framework de desarrollo relativamente nuevo, pero ya ha capturado la atención de una gran número de desarrolladores, Bulma CSS se centra en crear un framework CSS ligero y simple utilizando Flexbox para su sistema de rejilla.

Ventajas

• Una sintaxis semántica, hace que nuestro código sea más comprensible.
• Es un framework ligero, por lo que tu web se verá recompensada a la hora de cargar con rapidez.
• Fácil de usar.
• Muy personalizable y modular, con la posibilidad de exportar solamente los componentes que necesites.
• Un grid responsive basado en flexbox.

Desventajas

• Al ser relativamente nuevo la comunidad que lo apoya no es muy grande, pero crece con fuerza.
• Debido a su temprana edad falta corregir algunos bugs.
• No es una buena opción para navegadores Internet Explorer(pero a quién le importa Internet Explorer).

Milligram

El framework CSS Milligram, con 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.

Ventajas

• Un diseño limpio y minimalista.
• Tamaño de solamente 2kb.

Desventajas

• Falta de personalización en los elementos.
• Comunidad pequeña.

UIKit

El siguiente en la lista es UIKit, con 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 CSS en el 2018 para crear tus proyectos web.

Ventajas

• Modular.
• Un tamaño ligero.
• Aspecto cuidado sin necesidad de añadir tu propio CSS.
• Muy Personalizable.

Desventajas

• La nomenclatura de las clases no es muy elegante.
• Falta de una comunidad más grande.

Semantic UI

Semantic UI como su propio nombre indica, está enfocado en un código de programación legible para el programador. En mi opinión Semantic UI es para los desarrolladores que deseen un diseño elegante por medio de un código de programación con un lenguaje natural.

Ventajas

• Carga solamente los elementos que necesitas.
• Amplia gama de elementos muy personalizables.
• Clases realmente semánticas.
• Diseño elegante.

Desventajas

• Un tamaño de archivos demasiado grande comparándolo a su competencia.
• Uso excesivo de Javascript.

Materialize

Si el proyecto con el cual estás involucrado, desea un diseño al estilo material desing como el que tiene Android, no hay ninguna duda de que tu elección debe ser el framework CSS Materialize.

Ventajas

• Gran librería de componentes con un diseño Material Desing.
• Facilidad de uso.
• Buena documentación.

Desventajas

• 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 para todos los públicos, Pero no hay duda que si buscas una opción con un tamaño reducido y un estilo sencillo, Pure.css es un buen candidato.

Ventajas

• Una fácil personalización.
• Un tamaño ligero.

Desventajas

• Documentación un poco confusa.
• Falta de estilos en sus componentes, esto puede ser una ventaja o desventaja, depende del gusto de cada uno.

Kube

Kube no es un framework CSS muy usado, pero su estilo me parece muy refinado, por lo que decidí añadirlo a esta lista rodeado de los mejores, y de esta forma dispones de alguna opción más con un diseño diferente a los nombrados más arriba.

Ventajas

• Los archivos CSS son de un tamaño reducido.
• Proyecto estéticamente sólido.

Desventajas

• La comunidad es realmente pequeña, por no decir que no existe.