Cuadro comparativo frameworks
Oscar López Clave:26 6.to Computación "A" PEM: Oscar Méndez Estructura De Datos
BOOTSTRAP
MATERIALIZE
SEMANTIC UI
TAILWIND CSS
BULMA
PURE.CSS
METRO 4
SKELETON
ULKIT
FOUNDATION
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
DEFINICIÓN
2017
2016
2011
2011
2014
2008
2013
2013
2011
2012
AÑO DE CREACION
Mark Otto y Jacob Thornton en Twitter
YOOtheme
Yahoo
ZURB
Jack Lukic
Jeremy Thomas
Adam Wathan
Inspirado por Google
Dave Gamache
Sergey Pimenov
CREADOR
1.0, 0.100, 0.99, 0.98, 0.97
1.0, 0.9, 0.8, 0.7, 0.6
4.1, 4.0, 3.4, 3.3, 3.2
2.5, 2.4, 2.3, 2.2, 2.1
6.8, 6.7, 6.6, 6.5, 6.4
3.21, 3.20, 3.19, 3.18, 3.17
2.0.4, 2.0.3, 2.0.2, 2.0.1, 2.0
4.5, 4.4, 4.3, 4.2, 4.1
2.1, 2.0, 1.0, 0.6, 0.5
5.3, 5.2, 5.1, 5.0, 4.6
VERSIONES
Framework UI con componentes listos.
Framework responsive como Bootstrap.
Permite crear diseños responsive como otros frameworks.
Usa sistema grid como Bootstrap.
Similar a Bootstrap con grid y componentes.
Framework CSS responsive como Bootstrap o Foundation.
Framework CSS y JS para crear interfaces web responsivas
Sistema grid responsive.
Framework UI con componentes.
Framework CSS responsive.
SEMEJANZAS
Tiene uno de los sistemas de grid más usados
Clases más comprensibles para humanos.
Sigue el estilo visual Material Design.
Solo usa CSS (no incluye JavaScript).
No tiene componentes prediseñados; usa clases utilitarias.
Más flexible y profesional para proyectos grandes.
Más ligero y modular.
Mucho más simple que otros frameworks.
Estética basada en Windows.
Muy pequeño (menos de 5KB).
DIFERENCIAS
HTML, CSS, JavaScript
HTML, CSS, JavaScript
CSS y Flexbox
CSS, PostCSS, JavaScript
HTML, CSS, JavaScript
HTML, CSS, JavaScript
HTML y CSS
HTML, CSS, JavaScript
CSS
HTML, CSS, JavaScript
TECNOLOGIAS IMPLEMENTADAS
dashboards, landing pages, paneles administrativos
apps web con diseño tipo Android
paneles web, aplicaciones frontend
apps modernas, SaaS, dashboards
interfaces limpias y paneles administrativos
sitios empresariales y aplicaciones web
sitios web modernos y CMS
páginas simples o prototipos
aplicaciones web estilo Windows
sitios rápidos y minimalistas
EJEMPLOS APLICADOS
https://getbootstrap.com
https://materializecss.com
https://bulma.io
https://get.foundation
https://getuikit.com
http://getskeleton.com
https://metroui.org.ua
https://purecss.io
https://semantic-ui.com
https://tailwindcss.com
SITIO OFICIAL
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
LOGO
// CUADRO COMPARATIVo
Soy un subtítulo genial, ideal para dar más contexto sobre el tema que vas a tratar
EFECTO WOW
CREATIVIDAD
MAGIA
DISEÑO
ANIMACIÓN
Mejora la comunicación sobre cualquier tema.
Utiliza timelines para contar historias.
Utiliza líneas de tiempo.
Adecúa las fuentes y el color al tema.
Es clara y estructurada.
Cuenta historias jerárquicamente.
Establecer un flujo a través del contenido.
Tiene un color adecuado a su tema.
Es animada e interactiva.
Incluye imágenes y entretiene.
Emociona al cerebro, a través de elementos multimedia.
Adecúa las fuentes y el color al tema.
Representa datos con gráficos.
Representa datos con gráficos.
Hace 'match' con tu audiencia.
// CUADRO COMPARATIVo
Soy un subtítulo genial, ideal para dar más contexto sobre el tema que vas a tratar
Seres Digitales
Seres Sociales
Aunque no debes abusar de los bulletpoints, los iconos y esquemas pueden ser grandes aliados a la hora de contar historias.
Puedes hacer un esquema para sintetizar el contenido y utilizar palabras que se graben a fuego en el cerebro de tu audiencia.
Si vas a presentar en directo, te recomendamos que entrenes tu voz y ensayes: ¡la mejor improvisación siempre es la más trabajada!.
El contenido visual es un lenguaje transversal, universal, como la música. Somos capaces de entender imágenes de hace millones de años, incluso de otras culturas.
Disciplinas como el Visual Thinking facilitan la toma de notas visualmente ricas gracias al uso de imágenes, gráficas, infografías y dibujos sencillos. ¡Dale caña!
Demuestra entusiasmo, esboza una sonrisa y mantén el contacto visual con tu audiencia: 'The eyes, chico. They never lie'. Déjalos boquiabiertos.
// CUADRO COMPARATIVo
Soy un subtítulo genial, ideal para dar más contexto sobre el tema que vas a tratar
Seres creativos
Seres exploradores
Convertimos a la comunicación visual en una experiencia cuando añadimos interactividad, animación y storytelling.
Hace falta diversión para la creatividad, creatividad para innovar, innovar para tener éxito... Diversión es éxito.
13,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
8,6M
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
33,1K
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
7,2M
// ESCRIBE UN SUBTÍTULO
27,2K
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
23,2K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
17,7K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
63,4K
// ESCRIBE UN SUBTÍTULO
5,3K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
12,6K
// ESCRIBE UN SUBTÍTULO
24,3K
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
Cuadro comparativo frameworks
Oscar Alexander López López
Created on March 10, 2026
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Visual Thinking Checklist
View
Choice Board Flipcards
View
Team Retrospective
View
Fill in the Blanks
View
Museum Flipcards
View
Image Comparison Slider
View
Microcourse: Key Skills for the Professional Environment
Explore all templates
Transcript
Cuadro comparativo frameworks
Oscar López Clave:26 6.to Computación "A" PEM: Oscar Méndez Estructura De Datos
BOOTSTRAP
MATERIALIZE
SEMANTIC UI
TAILWIND CSS
BULMA
PURE.CSS
METRO 4
SKELETON
ULKIT
FOUNDATION
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
Ver Definición
DEFINICIÓN
2017
2016
2011
2011
2014
2008
2013
2013
2011
2012
AÑO DE CREACION
Mark Otto y Jacob Thornton en Twitter
YOOtheme
Yahoo
ZURB
Jack Lukic
Jeremy Thomas
Adam Wathan
Inspirado por Google
Dave Gamache
Sergey Pimenov
CREADOR
1.0, 0.100, 0.99, 0.98, 0.97
1.0, 0.9, 0.8, 0.7, 0.6
4.1, 4.0, 3.4, 3.3, 3.2
2.5, 2.4, 2.3, 2.2, 2.1
6.8, 6.7, 6.6, 6.5, 6.4
3.21, 3.20, 3.19, 3.18, 3.17
2.0.4, 2.0.3, 2.0.2, 2.0.1, 2.0
4.5, 4.4, 4.3, 4.2, 4.1
2.1, 2.0, 1.0, 0.6, 0.5
5.3, 5.2, 5.1, 5.0, 4.6
VERSIONES
Framework UI con componentes listos.
Framework responsive como Bootstrap.
Permite crear diseños responsive como otros frameworks.
Usa sistema grid como Bootstrap.
Similar a Bootstrap con grid y componentes.
Framework CSS responsive como Bootstrap o Foundation.
Framework CSS y JS para crear interfaces web responsivas
Sistema grid responsive.
Framework UI con componentes.
Framework CSS responsive.
SEMEJANZAS
Tiene uno de los sistemas de grid más usados
Clases más comprensibles para humanos.
Sigue el estilo visual Material Design.
Solo usa CSS (no incluye JavaScript).
No tiene componentes prediseñados; usa clases utilitarias.
Más flexible y profesional para proyectos grandes.
Más ligero y modular.
Mucho más simple que otros frameworks.
Estética basada en Windows.
Muy pequeño (menos de 5KB).
DIFERENCIAS
HTML, CSS, JavaScript
HTML, CSS, JavaScript
CSS y Flexbox
CSS, PostCSS, JavaScript
HTML, CSS, JavaScript
HTML, CSS, JavaScript
HTML y CSS
HTML, CSS, JavaScript
CSS
HTML, CSS, JavaScript
TECNOLOGIAS IMPLEMENTADAS
dashboards, landing pages, paneles administrativos
apps web con diseño tipo Android
paneles web, aplicaciones frontend
apps modernas, SaaS, dashboards
interfaces limpias y paneles administrativos
sitios empresariales y aplicaciones web
sitios web modernos y CMS
páginas simples o prototipos
aplicaciones web estilo Windows
sitios rápidos y minimalistas
EJEMPLOS APLICADOS
https://getbootstrap.com
https://materializecss.com
https://bulma.io
https://get.foundation
https://getuikit.com
http://getskeleton.com
https://metroui.org.ua
https://purecss.io
https://semantic-ui.com
https://tailwindcss.com
SITIO OFICIAL
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
Ver Logo
LOGO
// CUADRO COMPARATIVo
Soy un subtítulo genial, ideal para dar más contexto sobre el tema que vas a tratar
EFECTO WOW
CREATIVIDAD
MAGIA
DISEÑO
ANIMACIÓN
Mejora la comunicación sobre cualquier tema.
Utiliza timelines para contar historias.
Utiliza líneas de tiempo.
Adecúa las fuentes y el color al tema.
Es clara y estructurada.
Cuenta historias jerárquicamente.
Establecer un flujo a través del contenido.
Tiene un color adecuado a su tema.
Es animada e interactiva.
Incluye imágenes y entretiene.
Emociona al cerebro, a través de elementos multimedia.
Adecúa las fuentes y el color al tema.
Representa datos con gráficos.
Representa datos con gráficos.
Hace 'match' con tu audiencia.
// CUADRO COMPARATIVo
Soy un subtítulo genial, ideal para dar más contexto sobre el tema que vas a tratar
Seres Digitales
Seres Sociales
Aunque no debes abusar de los bulletpoints, los iconos y esquemas pueden ser grandes aliados a la hora de contar historias.
Puedes hacer un esquema para sintetizar el contenido y utilizar palabras que se graben a fuego en el cerebro de tu audiencia.
Si vas a presentar en directo, te recomendamos que entrenes tu voz y ensayes: ¡la mejor improvisación siempre es la más trabajada!.
El contenido visual es un lenguaje transversal, universal, como la música. Somos capaces de entender imágenes de hace millones de años, incluso de otras culturas.
Disciplinas como el Visual Thinking facilitan la toma de notas visualmente ricas gracias al uso de imágenes, gráficas, infografías y dibujos sencillos. ¡Dale caña!
Demuestra entusiasmo, esboza una sonrisa y mantén el contacto visual con tu audiencia: 'The eyes, chico. They never lie'. Déjalos boquiabiertos.
// CUADRO COMPARATIVo
Soy un subtítulo genial, ideal para dar más contexto sobre el tema que vas a tratar
Seres creativos
Seres exploradores
Convertimos a la comunicación visual en una experiencia cuando añadimos interactividad, animación y storytelling.
Hace falta diversión para la creatividad, creatividad para innovar, innovar para tener éxito... Diversión es éxito.
13,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
8,6M
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
33,1K
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
7,2M
// ESCRIBE UN SUBTÍTULO
27,2K
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
23,2K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
17,7K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
63,4K
// ESCRIBE UN SUBTÍTULO
5,3K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!
12,6K
// ESCRIBE UN SUBTÍTULO
24,3K
// ESCRIBE UN SUBTÍTULO
23,4K
// ESCRIBE UN SUBTÍTULO
escribe un título genial
Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras!