Tema: Frameworks CSS

Nombre: Layla Vargas Bonnet.

Matrícula:2019-8368.

Profesor: Luis Soto

Materia: Programación Web

Grupo: Sábado 9-12

 FRAMEWORKS CSS:

Introducción:

Cuando adquieres experiencia construyendo varios sitios web, y tienes libertad de

elegir tus herramientas, acabas buscando un conjunto de herramientas que
optimicen tu trabajo y te vuelva más productivo. Los Frameworks CSS son fáciles de
aprender, ofreciéndote una capa de abstracción que evita la repetición de ciertos
componentes o formas de maquetar. Aunque también es cierto que puedes acabar
usándolo por razones ajenas: te llama la atención, heredas el proyecto, lo
recomienda un compañero, vas a trabajar en equipo… y, bueno, no olvidemos lo
divertido que resulta probar nuevos sabores.

A continuación he realizado una investigación sobre Frameworks CSS, destacar

todo lo bueno y malo, aunque siempre será una opinión personal.

¿Qué es un Framework CSS?

Un framework de CSS es un conjunto de reglas y estilos predefinidos que se

utilizan para desarrollar sitios web de manera más rápida y eficiente. Los
frameworks de CSS incluyen componentes comunes como botones, formularios,
tablas y estilos de tipografía, así como un sistema de grillas que te permite crear un
diseño estructurado y organizado.

Además, muchos frameworks de CSS incluyen estilos responsivos que se adaptan

automáticamente a diferentes tamaños de pantalla y dispositivos, lo que hace que
sea más fácil crear un diseño que se vea bien en todas las plataformas.

Los frameworks de CSS son una herramienta muy útil para los desarrolladores web,
ya que ahorran tiempo y esfuerzo al proporcionar componentes y estilos
predefinidos que se pueden reutilizar en múltiples proyectos. También son útiles
para los diseñadores web que no tienen experiencia en desarrollo web, ya que les
permiten crear un diseño atractivo y profesional sin tener que escribir todas las
reglas CSS desde cero.

En resumen, los frameworks de CSS son una herramienta valiosa para los
desarrolladores y diseñadores web que buscan crear sitios web de manera más
eficiente y efectiva.
Ventajas:

● Ahorro de tiempo: Al utilizar un framework de CSS, puedes ahorrar tiempo y

esfuerzo al no tener que crear desde cero todas las reglas CSS necesarias
para un sitio web. Además, los componentes y estilos predefinidos te
permiten desarrollar y diseñar sitios web de manera mucho más rápida.

● Consistencia y estandarización: Al utilizar un framework de CSS, se

garantiza una apariencia y funcionamiento consistentes a través de todo el
sitio web. Esto ayuda a mejorar la experiencia del usuario y aumentar la
confianza en la marca.

● Responsive Design: Muchos frameworks de CSS incluyen reglas CSS y

componentes que permiten un diseño adaptable o responsive, lo que significa
que el sitio web se ajustará automáticamente a diferentes tamaños de
pantalla y dispositivos.

● Comunidad y documentación: La mayoría de los frameworks de CSS

tienen una amplia comunidad de desarrolladores y una gran cantidad de
documentación y recursos disponibles en línea. Esto significa que puedes
encontrar soluciones a problemas comunes y aprender más sobre cómo
utilizar el framework eficazmente.

● Accesibilidad: Algunos frameworks de CSS están diseñados para

proporcionar una experiencia de accesibilidad óptima para los usuarios con
discapacidades, lo que es importante considerar en el desarrollo de sitios
web accesibles.

Desventajas:

Aunque los frameworks de CSS tienen muchas ventajas, también hay algunas
desventajas que debes considerar:

● Tamaño del archivo: Algunos frameworks de CSS son bastante grandes y

pueden aumentar el tamaño total del archivo y la carga de la página, lo que
puede afectar negativamente la velocidad de carga y el rendimiento del sitio
web.

● Personalización limitada: Aunque los frameworks de CSS te permiten

personalizar y adaptar el diseño a tus necesidades específicas, puede haber
algunos límites en lo que se puede personalizar. Esto puede resultar en un
diseño que no se ajusta perfectamente a tus necesidades y requisitos.
 ● Sobrecarga de código: Al utilizar un framework de CSS, puede haber una
sobrecarga de código que no se utiliza o que no es necesario para un
proyecto específico. Esto puede resultar en un archivo CSS más grande y
más difícil de mantener.

● Aprendizaje: Algunos frameworks de CSS pueden ser complejos y requieren

un tiempo de aprendizaje y comprensión antes de poder utilizarlos
eficazmente.

Características:

Las características que puedes encontrar en un framework de CSS pueden variar

dependiendo del framework en cuestión, pero algunas de las características más
comunes incluyen:

● Grillas: Muchos frameworks de CSS incluyen un sistema de grillas o rejillas

que te permiten crear un diseño de página estructurado y organizado.

● Estilos de tipografía y formato: La mayoría de los frameworks de CSS

incluyen estilos predefinidos para elementos como títulos, párrafos, enlaces y
otros elementos de formato.

● Componentes predefinidos: Algunos frameworks de CSS incluyen

componentes como botones, formularios, tablas y otros elementos comunes
que se utilizan con frecuencia en los sitios web.

● Estilos responsivos: Muchos frameworks de CSS incluyen reglas CSS y

componentes que permiten un diseño adaptable o responsive, que se
ajustará automáticamente a diferentes tamaños de pantalla y dispositivos.

● Iconos y fuentes: Algunos frameworks de CSS incluyen iconos y fuentes

que puedes utilizar en tu sitio web.

● Animaciones y transiciones: Algunos frameworks de CSS incluyen

animaciones y transiciones predefinidas que puedes utilizar para añadir un
toque de dinamismo y atractivo a tu sitio web.

● JavaScript integrado: Algunos frameworks de CSS están diseñados para

trabajar en conjunto con JavaScript, lo que te permite añadir interacciones y
funcionalidades dinámicas a tu sitio web.
Clasificación:

Podemos clasificar los frameworks de css en dos tipos:

Multipropósito: Proporcionan un conjunto de utilidades variadas útiles para

distintos aspectos del desarrollo de un diseño web. Ej Cascade Framework.

Propósito específico: Están orientados a proporcionar herramientas para un

propósito determinado. Por ejemplo, hay frameworks de CSS orientados a
proporcionar herramientas para el desarrollo de rejillas (Ej. Responsive Grid System,
Skeleton, Semantic Grid System), orientadas al control de la parte gráfica de la
interfaz de usuario (Ej. Accordion, tabs, slideshow), orientados a la tipografía, etc.

Frameworks más utilizados:

Bootstrap

Hablamos del segundo proyecto más

exitoso de GitHub (153.000 estrellas), con
una popularidad sin precedentes en el
desarrollo Web. Nació como una simple
herramienta interna de Twitter. Mark Otto y
Jacob Thornton se encargaron de realizar
un conjunto de estilos y patrones para dar
homogeneidad a todas las Webs que se
estaban creando dentro de empresa. Lo
bautizada como Blueprint. En 2011
terminaron el desarrollo y lo hicieron
público bajo el nombre de Bootstrap. Su gran uso a ayudado a que tenga una
evolución, adaptándose a nuevos estándares, hasta llegar a nuestro días con Flex.

Ventajas:

● 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.
 ● El núcleo principal lo desarrolla un equipo experimentado de Twitter.

● Funcionalidades integradas en Javascript, sin dependencias externas.

Desventajas:

● Complejo a la hora de modificar sus estilos.

● Te obliga a maquetar con un HTML poco flexible.

● En la versión (v4) se dio un giro duro. Perdió la compatibilidad con versiones

anteriores y navegadores que no usen Flex (Safari 10, iOS6, IE8, IE9…).

Tailwind CSS

Tailwind no es un Framework, o UI kit,

como Bootstrap, Bulma o Foundation…
No tiene temas, ni componentes
prefabricados, ni Javascript, ni te
impone un diseño que te pelearas para
modificar. Son simples estilos, en
concreto un montón de clases. Una
gran biblioteca que te acelerará como
un cohete la creación de cualquier
diseño que se te pase por la cabeza. Cuando lo domines se dará el caso de hacer
una página sin haber escrito ni una línea de CSS.

Ventajas:

● 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.
Inconvenientes:

● 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.

● Está construido en Javascript, lo que conlleva que sea más complejo para la
comunidad realizar aportaciones al repositorios.

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.

Ventajas:

● Diseño exquisito.

● Detrás hay un gran diseñador Web como Jeremy Thomas.

● Fácil de personalizar.

● Guía para migrar desde Bootstrap.

● El código está en un SASS preciosamente bien ordenado.

Inconvenientes:

● La documentación no es cómoda. Necesita un buscador urgentemente.

● El contenedor no siempre se comporta como esperas.

 ● No dispone de 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.

Pico.css

Framework CSS más minimalista de la lista.

Juega con un cambio automático entre un
tema claro y oscuro dependiendo de la
configuración del sistema operativo. Además
consigue reducir la complejidad con clases
claras que resuelven los problemas más
comunes de un desarrollo web. Su curva de
aprendizaje es prácticamente nula, con un
vistazo rápido a la documentación ya podrás
empezar a trabajar. Sin duda un heredero
directo de otros micro frameworks que fueron
abandonados en el 2020 como: pure.css,
chota, lit o el famoso Spectre.

Ventajas:

● Rápido de aprender.

● Solo 52 Kb.

● Componentes esenciales: acordeones, tarjetas, navegadores, barras de

progreso…

● Tema oscuro y claro.

Inconvenientes:

● Sin animaciones.

● Muy básico al maquetar.

● Puede quedarse pequeño para proyecto grandes.

Foundation:

El ancestral enemigo de Bootstrap. Se

ha visto siempre como la alternativa
seria para empresas. Cabe destacar
que nació en el 2011 con la intención
de mejorar lo que había en el mercado.
Y para ello usaron SASS como base,
exprimiendo todo su potencial (con
mixins) y siendo pioneros en la
incorporación. A pesar de estar
mantenido por una empresa (Zurb), su código posee licencia Opensource. Por otro
lado, es un proyecto con 3 ramas. No sólo puedes hacer sitios Web, sino también
Emails y Apps (con Angular). Siendo en su conjunto una navaja suiza del Diseño
Web.

Ventajas:

● 3 en 1: Webs, Emails y Apps.

● Herramienta para personalizar los componentes y así controlar el peso final

de CSS.

● Una documentación maravillosa: su buscador es inteligente, muchos

ejemplos incluyen un vídeo tutorial a parte de su demo, viene con una gran
cantidad de ejemplos en forma de código, enlace para modificar cualquier
demo en codepen, boton para ayudar en los textos o pedir ayuda por Slack…

● Varias plantillas para maquetar con una base estructurada.

● Sección en su web con snippets (trocitos de código de ejemplo) realizado por

la comunidad.

Inconvenientes:

● 7 archivos diferentes para vincular.

● Gran dependencia de Javascript.

● Puede resultar complejo para un Diseñador Web con poca experiencia.

● Para Apps hay otras herramientas más completas.

Minicss:

Se podría considerar un
microframework o un punto de partida.
Se centra en dar las herramientas
mínimas de maquinación y nivelar las
pequeñas imperfecciones del HTML.
Para algunos será simple, pero si
valoramos su ridículo peso con todo lo
que nos proporciona podrás comprobar
que es una inversión muy buena. Por
encima de su esqueleto te deja colocar lo que necesites. Será tan potente como
buen Diseñador Web seas.

Ventajas:

● Peso insignificante (46kb).

● Documentación clara y búsqueda sencilla.

● Sistema de grid (columnas) clónico de Bootstrap. No es necesario aprender

nada si ya lo conoces.

● Se aplica la gran mayoría de los estilos a las etiquetas. Olvídate de añadir

nuevas clases.

● 3 temas incluidos (Original, Dark y Nord)

● No necesitas Javascript para nada.

Inconvenientes:

● Es tan minimalista que se quedará corto cuando el proyecto crezca. Todo lo

básico viene incluido, pero el resto tendrás que fabricarlo.

● Las listas podrían estar más elaboradas.

● No cumple el formato típico para los menús de headers (nav>ul>li>a).

Otros frameworks CSS destacados:

Pure CSS: es una librería de estilos minimalista y ligera que se centra en

proporcionar solo los elementos básicos necesarios para construir diseños web. A
diferencia de otros frameworks CSS más complejos, Pure CSS no incluye
componentes pre-construidos, sino que brinda las herramientas básicas para
construir tus propios componentes desde cero.

Entre las características de Pure CSS se encuentran:

● Tamaño pequeño: La librería es muy ligera, lo que la hace ideal para

proyectos pequeños o para aquellos que requieren un control total sobre su
diseño.

● Flexibilidad: Al no tener componentes pre-construidos, Pure CSS te brinda la

flexibilidad de construir tus propios componentes a medida.

● Personalización: Al utilizar solo un conjunto básico de reglas de estilo, es fácil

personalizar y adaptar el diseño a tus necesidades específicas.

● Compatibilidad: Pure CSS es compatible con la mayoría de los navegadores

modernos y está diseñado para ser utilizado con una amplia gama de
tecnologías web.

Materialize: es un framework CSS basado en los conceptos de diseño de Google's

Material Design. Se enfoca en proporcionar una amplia variedad de componentes
pre-construidos y herramientas para crear aplicaciones y sitios web con un aspecto
moderno y coherente.

Algunas de las características más destacadas de Materialize incluyen:

● Componentes pre-construidos: Materialize incluye una amplia variedad de

componentes pre-construidos, como menús, formularios, botones, tablas,
modales, iconos, etc.

● Diseño responsivo: Materialize está diseñado para adaptarse a diferentes

tamaños de pantalla y dispositivos, lo que lo hace ideal para proyectos con
una amplia gama de dispositivos.
 ● Estructura de diseño: Materialize incluye una estructura de diseño clara y
organizada que ayuda a mantener la coherencia en la apariencia de tu sitio
web.

● Personalización: Aunque Materialize incluye una amplia variedad de

componentes pre-construidos, es posible personalizar el diseño según tus
necesidades específicas.

Semantic UI: es un framework de diseño de interfaz de usuario basado en HTML,

CSS y JavaScript. Fue desarrollado para facilitar la creación de interfaces de
usuario atractivas y consistentes utilizando un conjunto de componentes de UI
pre-diseñados. Con Semantic UI, los desarrolladores pueden crear una apariencia
coherente en todas las páginas y aplicaciones sin tener que crear elementos de
interfaz desde cero.

Entre las características de Semantic UI se encuentran:

● Una amplia gama de componentes de UI pre-diseñados, como menús,

botones, formularios, iconos, etc.

● Personalización de los estilos de los componentes a través de la edición de

archivos CSS.

● Integración con popular frameworks JavaScript como React, Angular y Vue.js.

● Una documentación completa y una comunidad activa que brinda soporte y

recursos adicionales.

Ejemplos:

Algunos ejemplos de framework de CSS son:

● * awsm.css
● * Armazon
● * Baseguide
● * Bootstrap
● * BoxySheets
● * Cascade Framework
● * Cascade Framework Light
● * Chopstick
● * Concise
● * Flexify
● * floatz
● * Foundation
 ● * Ink
● * inuitcss
● * Jalsonic Opinion
● * Kathamo
● * Kube
● * Kule Lazy
● * Material Design Lite
● * Materialize
● * Modest Grid
● * Pure CSS
● * Responsee
● * Responsive BP
● * Responsive Grid System
● * Schema UI / Built with LESS
● * Semantic UI
● * Sierra SCSS Library
● * Tacit
● * uikit
● * Unsemantic
● * Visual Component Library (VCL)
● * W3.CSS
● * Wee
● * Brian
● * Buildit
● * YUI Grids

Conclusión:

Los frameworks CSS son herramientas útiles que pueden acelerar y simplificar el
desarrollo web al proporcionar componentes y estilos preconstruidos para dar forma
a la apariencia de un sitio web o aplicación. Existen muchos frameworks CSS
disponibles, cada uno con sus propias fortalezas y debilidades, por lo que es
importante elegir el que mejor se adapte a tus necesidades específicas. En general,
los frameworks CSS son una excelente manera de ahorrar tiempo y esfuerzo en el
desarrollo de proyectos web y asegurarse de que tu sitio tenga un aspecto
profesional y uniforme.