Las 30 mejores alternativas a Bootstrap

thumbnail - pixelanium - las 30 mejores alternativas a bootstrap
thumbnail - pixelanium - las 30 mejores alternativas a bootstrap

En estos días, el requisito número uno de cualquier sitio web es funcionar correctamente en todo tipo de dispositivos (especialmente móviles). Para ese fin, Bootstrap ha sido uno de los frameworks front-end estrella y más populares y ha aparecido en la lista principal de muchos desarrolladores para diseñar sitios web optimizados para dispositivos móviles.

Si bien Bootstrap es indudablemente sorprendente en lo que hace, hay otros marcos que son igualmente buenos y pueden adaptarse mejor a sus requisitos.

En este artículo, te traemos 30 alternativas de Bootstrap que podrían ser más adecuadas para usted en diferentes escenarios.

Como todos saben, los dispositivos como teléfonos móviles y tabletas tienen tamaños de pantalla más pequeños y memoria limitada en comparación con las computadoras de escritorio. Por lo tanto, no siempre es una buena opción incluir el marco Bootstrap completo en su código debido a su gran tamaño de archivo. En su lugar, puede usar una biblioteca con una huella más liviana que Bootstrap pero que proporciona todas las funcionalidades necesarias.

Hay muchas otras razones que pueden convencerlo de que eche un vistazo a algunas alternativas disponibles a Bootstrap. Entonces, comencemos echando un vistazo a estas 30 alternativas de Bootstrap.

1. Foundation

foundation-pixelanium-las-30-mejores-alternativas-a-bootstrap
foundation-pixelanium-las-30-mejores-alternativas-a-bootstrap

El marco front-end receptivo más avanzado del mundo. Cree rápidamente prototipos y código de producción para sitios que funcionan en cualquier tipo de dispositivo.

Foundation es una familia de marcos frontend que facilitan la creación de sitios web, aplicaciones y correos electrónicos receptivos para cualquier dispositivo.

Es uno de los marcos frontend más completos, y es incluso más completo que Bootstrap. Todo lo que necesita para configurar sus aplicaciones lo encontrará en un marco de Foundation: un sistema de diseño móvil que responde primero, complementos JS, personalización, un sistema de cuadrícula, tipografía, componentes de interfaz de usuario, clases de servicios públicos, etc.

Incluso hay un marco completo dedicado a los correos electrónicos (que es básicamente inaudito en el ecosistema de marcos frontend).

Este marco le está dando a Bootstrap un momento difícil. Los desarrolladores lo admiran por su inigualable flexibilidad.

¿Es Foundation una alternativa completa de bootstrap?

Si. De hecho, si desea un marco de calidad profesional, Foundation podría ser una mejor opción.

Alternativa a Bootstrap: pros y contras

Pros:

  • La base se puede personalizar fácilmente para adaptarse a requisitos específicos.
  • La formación y la certificación profesionales están disponibles
  • Ofrece un marco de interfaz incomparable (separado) dirigido a correos electrónicos
  • Compatible con Ruby on Rails
  • Soporte para idiomas de derecha a izquierda

Contras:

  • Tiene una curva de aprendizaje empinada ya que es muy completo
  • Utiliza preprocesador CSS obstinado (Sass)
  • Es un poco pesado cuando se trata de huella IO

Github: github.com/foundation/foundation-sites
Popularidad: Muy popular (28,559 astrónomos)
Calidad de mantenimiento: Mantenido activamente

Encuentra los mejores cursos de Foundation aquí.

2. Bulma

bulma - pixelanium - las 30 mejores alternativas a bootstrap
bulma – pixelanium – las 30 mejores alternativas a bootstrap

Bulma es un marco CSS fuertemente inspirado en Bootstrap y basado en el moderno Módulo de Caja Flexible, generalmente conocido como flexbox.

Este marco contiene todos los elementos frontend más estándar que puede encontrar en Bootstrap (menos los complementos JS): diseño receptivo para dispositivos móviles, CSS normalizado, tema personalizable, tipografía básica, clases CSS auxiliares, componentes comunes de la interfaz de usuario como menús, modales, migas de pan , tarjetas, entre otras cosas.

¿Bulma es una alternativa completa de bootstrap?

No exactamente. Dado que es puramente un marco CSS, no se incluyen complementos JS. Si no usa los complementos JS de Bootstrap, entonces puede considerarse una alternativa completa

Alternativa a Bootstrap: pros y contras

Pros:

  • Un sistema de cuadrícula súper simple
  • 100% receptivo (primero en dispositivos móviles)
  • Modular (solo incluye lo que necesitas)

Contras:

  • El sistema de cuadrícula se basa en flexbox, que no es la tecnología ideal para diseños bidimensionales (flexbox es mejor para diseños lineales)

Github: github.com/jgthms/bulma
Popularidad: Muy popular (39.091 astrónomos)
Calidad de mantenimiento Mantenido activamente

Encuentra los mejores cursos de Bulma aquí.

3. CSS de Tailwind

tailwindcss - pixelanium - las 30 mejores alternativas a bootstrap
tailwindcss – pixelanium – las 30 mejores alternativas a bootstrap

Tailwind CSS es un marco CSS de bajo nivel altamente personalizable construido completamente en torno al concepto de clases de utilidad, que Bootstrap también proporciona listo para usar. Con las clases de utilidad, puede mezclar y combinar propiedades CSS en cualquier lugar sin tener que recurrir necesariamente a estilos en línea.

¿Tailwind CSS es una alternativa completa de arranque?

Algo así como. Aunque Tailwind CSS por sí solo no proporciona componentes comunes como botones o formularios (como lo hace Bootstrap), existen alternativas gratuitas y de pago creadas en torno al marco:

Alternativa a Bootstrap: pros y contras

Pros:

  • Altamente personalizable debido a que se construyó en torno a clases de servicios públicos
  • El marco Barebones significa menos cosas en su paquete de CSS con el mismo resultado
  • Todas las clases de servicios públicos responden
  • Compatible con componentes: puede crear fácilmente sus propios componentes

Contras:

  • El uso de clases de servicios públicos es muy controvertido. Algunos equipos prefieren usar CSS semántico en lugar de clases de utilidad, lo que hace que la adopción sea una pérdida en sí misma.
  • Sin componentes listos para usar. Tienes que buscarlos o crearlos tú mismo.

Github: github.com/tailwindcss/tailwindcss
Popularidad: Muy popular (39.091 astrónomos)
Calidad de mantenimiento Mantenido activamente

Aprenda a crear interfaces de usuario componiendo clases de utilidad CSS con Tailwind.

4. HTML5 Boilerplate

html boilerplate - pixelanium - las 30 mejores alternativas a bootstrap
html boilerplate – pixelanium – las 30 mejores alternativas a bootstrap

HTML5 Boilerplate no es un marco, sino una plantilla de frontend HTML5, CSS3 y JavaScript, nacida del conocimiento combinado de cientos de desarrolladores. Se utiliza para diseñar cualquier tipo de página web y le ayuda a crear sitios o aplicaciones web rápidos, robustos y adaptables.

Básicamente, viene con todos los bloques de construcción necesarios en un paquete vanilla frontend para diseñar un sitio web simple o complejo, como un lenguaje de programación como clases de ayuda CSS, estilos de impresión predeterminados, Normalize.css, Modernizr, jQuery.

¿Es HTML5 Boilerplate una alternativa completa de arranque?

No. Incluye clases de «utilidad» CSS pero son muy limitadas. Tampoco hay componentes o módulos de diseño, en realidad es solo una plantilla repetitiva. Cualquier personalización sofisticada depende del usuario.

Alternativa a Bootstrap: pros y contras

Pros:

  • Listo para HTML5
  • Diseñado pensando en la mejora progresiva
  • Incluye un paquete para ofrecer la mejor y más moderna experiencia hasta la fecha
  • Soporte integrado para imprimir una página web
  • Documentación completa y fácil de entender para todas y cada una de las líneas de código.

Contras

  • Su última versión ha eliminado la compatibilidad total con los navegadores web más antiguos (IE11 o menos), aunque existen versiones heredadas que ya no se mantienen que admiten esos navegadores.

Github: github.com/h5bp/html5-boilerplate
Popularidad: Muy popular (44,515 estrellas)
Calidad de mantenimiento: Mantenido activamente

Comience con Html5 Boilerplate

5. Material-UI

material ui - pixelanium - las 30 mejores alternativas a bootstrap
material ui – pixelanium – las 30 mejores alternativas a bootstrap

Material UI es un marco de React UI, basado en el sistema Material Design de Google.

En esencia, Material UI es una colección de componentes basados ​​en React con los conceptos de Material Design aplicados. La premisa subyacente es que cada elemento de la interfaz de usuario en su aplicación es un componente de React, incluso los bloques de construcción (contenedores, diseños …). Cada personalización se realiza en un entorno JS, incluso el estilo, utilizando el enfoque de CSS-in-JS, muy común en las aplicaciones React.

¿Material UI es una alternativa completa de arranque?

Sí, pero solo se limita a las aplicaciones basadas en React.

Alternativa a Bootstrap: pros y contras

Pros:

  • Personalizable (concepto de temas)
  • Basado en Material Design, que es un sistema de diseño respaldado por los expertos en UI de Google
  • Una gran cantidad de componentes reutilizables que se pueden incluir según sea necesario
  • Plantillas gratuitas y premium para crear prototipos rápidamente

Contras:

  • Solo se puede usar en un entorno React
  • Enfoque de estilo con opiniones (CSS-in-JS)
  • Sin clases de CSS de utilidad
  • Sin soporte móvil de primera clase

Github: github.com/mui-org/material-ui
Popularidad: Muy popular (44,515 estrellas)
Calidad de mantenimiento: Mantenido activamente

6. Metro_4

metro ui - metro_4 - pixelanium - las 30 mejores alternativas a bootstrap
metro ui – metro_4 – pixelanium – las 30 mejores alternativas a bootstrap

Metro UI es un marco de interfaz que trae el concepto de Metro (lenguaje de diseño) de Windows (SO) a la web. Está repleto de más de 100 componentes de interfaz de usuario para ayudarlo a diseñar cualquier tipo de sitio web.

Ofrece todo lo que hace Bootstrap, casi hasta el punto de ser una copia (al menos en lo que a estilismo se refiere). Metro UI también viene con una biblioteca JS llamada M4Q que es básicamente un sustituto de jQuery y sobre la cual se construyen muchas funcionalidades basadas en JS.

¿Metro UI es una alternativa completa de arranque? .

Sí, Metro UI es una gran opción.

Alternativa a Bootstrap: pros y contras

Pros:

  • Es casi como usar Bootstrap con una biblioteca central de JavaScript diferente y tersa
  • Soporte de internacionalización integrado (i18n)
  • Interoperable con los principales frameworks JS (Angular, React y Vue)

Contras:

  • Metro Design Language sigue el principio tipográfico, que se opone al enfoque esqueuomórfico. Las aplicaciones que utilizan este último podrían perder por completo su «encanto» en Metro.
  • La documentación es confusa y poco rigurosa

Github: github.com/olton/Metro-UI-CSS
Popularidad: Popular (6,496 astrónomos)
Calidad de mantenimiento Mantenido activamente

7. UIKit

uikit - pixelanium - las 30 mejores alternativas a bootstrap
uikit – pixelanium – las 30 mejores alternativas a bootstrap

UIKit es un marco front-end modular receptivo diseñado para ser liviano y fácil de usar. Fue creado para diseñar diseños web con píxeles perfectos para pantallas móviles y de escritorio.

Incluye muchos componentes de la interfaz de usuario que funcionan como Bootstrap, que se pueden conectar con código HTML o JS. Incluso hay componentes novedosos como Totop, Thumbnav, etc.

¿Es UIKit una alternativa completa de arranque? .

Sí, UIKit es una gran opción.

Alternativa a Bootstrap: pros y contras

Pros:

  • Procesamiento previo de CSS interoperable con Less o Sass
  • Soporte para idiomas de derecha a izquierda
  • Biblioteca de iconos incorporada

Contras:

  • Las clases de utilidad son muy limitadas en comparación con Bootstrap
  • Más de 600 problemas abiertos en Github es una especie de bandera amarilla. Puede ser demasiado pronto para utilizar este marco en una aplicación de nivel empresarial.

Github: github.com/uikit/uikit
Popularidad: Muy popular (15,565 observadores de estrellas)
Calidad de mantenimiento: Se mantiene activamente pero tiene muchos problemas abiertos

Aprenda los fundamentos de UIKit

8. Materialize

materialize - pixelanium - las 30 mejores alternativas a bootstrap
materialize – pixelanium – las 30 mejores alternativas a bootstrap

Materialize es un marco CSS moderno y receptivo basado en Material Design de Google. Debido a que se basa en Material Design, el marco incorpora componentes y animaciones que brindan más comentarios a los usuarios.

Los componentes de la interfaz de usuario son muy similares a los de Bootstrap (incluidos los complementos de JS), pero se ven y se sienten más livianos, lo que hace que los proyectos sean más agradables de ver y usar.

Hay complementos de marco específicos para abordar los problemas de UX específicos de los dispositivos móviles, como el arrastre y el tostado del menú lateral.

¿Es Materialise una alternativa completa de bootstrap? .

Sí, Materialise es una gran opción.

Alternativa a Bootstrap: pros y contras

Pros:

  • Ampliable mediante preprocesamiento Sass
  • Compatible con Ruby on Rails
  • Complementos específicos para abordar UX en dispositivos móviles
  • El refinado sistema de animaciones y transiciones proporciona una mejor experiencia de usuario
  • Los desarrolladores de Materialise han diseñado temas premium que se pueden comprar en su sitio web. Los temas existentes aumentan la velocidad de creación de prototipos.

Contras:

  • Materialise framework tiene una gran comunidad, pero todavía tiene más de 700 problemas abiertos en Github que deben abordarse.

Github: github.com/Dogfalo/materialize
Popularidad: Muy popular (37,284 astrónomos)
Calidad de mantenimiento: Se mantiene activamente pero tiene muchos problemas abiertos

Únase al curso completo Bootstrap y Materialise CSS

9. Element

element - pixelanium - las 30 mejores alternativas a bootstrap
element – pixelanium – las 30 mejores alternativas a bootstrap

Element es un conjunto de componentes de Vue.js reutilizables y prediseñados. Principios como la coherencia, la retroalimentación, la eficiencia y la capacidad de control impulsan las decisiones de diseño detrás de este marco.

Al igual que con la interfaz de usuario de Metro basada en React, cada entidad de interfaz de usuario en un proyecto basado en elementos debe ser un componente de Vue.js, incluso bloques de construcción como diseños y cuadrículas. La personalización del estilo se realiza mediante el preprocesamiento de Scss.

¿Es Element una alternativa completa de bootstrap?

> Sí, pero solo limitado a aplicaciones basadas en Vue.js

Alternativa a Bootstrap: pros y contras

Pros:

  • Temas personalizables
  • Gitter chatea con la comunidad
  • Integración de Atom / Visual Studio Code
  • Integración de croquis / armazones de alambre Axure
  • Kit de inicio de Laravel
  • Soporte de internacionalización integrado (i18n)
  • Element se distribuye con una licencia MIT que le permite usar su código como desee.

Contras:

  • Solo se puede usar en un entorno Vue.js, aunque hay versiones para Angular y React que pueden no ser tan completas como la original.
  • Sin soporte móvil de primera clase
  • Todavía tiene más de 1000 problemas abiertos en Github que deben solucionarse. La comunidad es enorme, pero las contribuciones han ido disminuyendo. El marco también genera una gran variedad de otras dependencias, que podrían tener un efecto multiplicador en la cantidad de problemas.
  • Muchos recursos (oficiales y no oficiales) están solo en chino

Github: github.com/ElemeFE/element
Popularidad: Muy popular (44,465 observadores de estrellas)
Calidad de mantenimiento: Se mantiene activamente pero tiene muchos problemas abiertos

10. Onsen UI

onsen ui - pixelanium - las 30 mejores alternativas a bootstrap
onsen ui – pixelanium – las 30 mejores alternativas a bootstrap

Onsen UI es un marco de desarrollo de UI para aplicaciones móviles híbridas (Cordova, etc.) y web (PWA). Permite a los desarrolladores crear aplicaciones móviles utilizando tecnologías web como CSS, HTML5 y JavaScript.

Ofrece todos los componentes básicos de la interfaz de usuario necesarios para la experiencia de usuario de una aplicación móvil.

Onsen se basó inicialmente en AngularJS y admitió jQuery. Ahora es su propio tipo de marco y tiene enlaces para jQuery, AngularJS, Angular, React y Vue.js.

¿Onsen UI es una alternativa completa de arranque?

No. Está diseñado específicamente para el desarrollo de aplicaciones móviles.

Alternativa a Bootstrap: pros y contras

Pros:

  • Temas personalizables
  • Una gran variedad de componentes de interfaz de usuario especialmente diseñados para aplicaciones móviles.
  • Ofrece a los usuarios finales la experiencia nativa que esperan de las aplicaciones en sus dispositivos.
  • CSS está escrito en Cssnext, lo que significa que toda la nueva sintaxis CSS está disponible para su uso
  • Basado en componentes web nativos y proporciona enlaces para AngularJS, Angular 2, React y Vue.js

Contras:

  • No viene con un depurador gratuito, lo que significa que los desarrolladores deben mirar cada línea de código individualmente

Zona de juegos: onsen.io/playground/
Github: github.com/OnsenUI/OnsenUI
Popularidad: Popular (7885 astrónomos)
Calidad de mantenimiento Mantenido activamente

Aprenda a desarrollar aplicaciones móviles de Android con Onsen UI

11. Material UI (MUI)

material ui mui - pixelanium - las 30 mejores alternativas a bootstrap
material ui mui – pixelanium – las 30 mejores alternativas a bootstrap

Material UI (MUI) es un marco de interfaz ligero que sigue las pautas de diseño de materiales de Google. La principal ventaja de usar MUI es su tamaño reducido (hasta 10 KB para todo el marco). Es personalizable mediante un preprocesador SASS y no tiene dependencias externas CSS / JS. El objetivo del proyecto es proporcionar un conjunto básico de componentes y métodos auxiliares que los desarrolladores puedan utilizar para crear sitios que sean rápidos y fáciles de usar.

Tiene interoperabilidad funcional con React (los componentes web angulares y nativos están en la hoja de ruta).

¿Material UI es una alternativa completa de arranque?

Sí, Material UI es una gran opción.

Alternativa a Bootstrap: pros y contras

Pros:

  • Pequeña huella de pie
  • Ofrece archivos CSS basados ​​en «px» y «rem»
  • Soporte especializado para correos electrónicos
  • Ayudantes de CSS (utilidades)
  • Tematización personalizable
  • Archivos de diseño para Sketch

Contras:

  • Sin interoperabilidad de Vue.js
  • Sin experiencia de usuario específica para dispositivos móviles
  • Baja popularidad

Github: github.com/muicss/mui
Popularidad: Nicho (4.309 observadores de estrellas)
Calidad de mantenimiento Mantenido activamente

12. Cirrus

cirrus - pixelanium - las 30 mejores alternativas a bootstrap
cirrus – pixelanium – las 30 mejores alternativas a bootstrap

Cirrus es un marco de CSS completo y totalmente receptivo con hermosos controles y una estructura simplista. Puede integrar Cirrus con cualquier diseño existente o utilizarlo para poner en marcha su próximo proyecto. Viene con dos opciones de paquete: un paquete «core» con estilo y funcionalidad simples y un paquete «ext» que extiende «core» con un subconjunto de componentes para la creación rápida de prototipos.

¿Cirrus es una alternativa completa de bootstrap?

No. No hay complementos JS disponibles. Si no usa los complementos de Bootstrap JS, entonces puede considerarse una alternativa completa.

Alternativa a Bootstrap: pros y contras

Pros:

  • Puntos de interrupción de diseño receptivo simplificado (móvil, tableta y escritorio)
  • Proporciona dos alternativas modernas para el diseño: flexbox y grid
  • Cirrus es de código abierto y de uso gratuito para proyectos web personales o comerciales.
  • Interoperabilidad con Vue.js (a través de un paquete de terceros)

Contras:

  • Clases de servicios públicos limitadas
  • Sin complementos JS, lo que significa que debe codificarlos usted mismo si es necesario
  • Solo tiene 5 colaboradores y una pequeña comunidad de usuarios.

Github: github.com/Spiderpig86/Cirrus
Popularidad: baja (369 observadores de estrellas)
Calidad de mantenimiento: mantenida activamente

13. MontageJS

montagejs - pixelanium - las 30 mejores alternativas a bootstrap
montagejs – pixelanium – las 30 mejores alternativas a bootstrap

MontageJS es un marco de aplicación impulsado por las tecnologías web estándar HTML5, CSS y JS. Está diseñado con miras a la capacidad de mantenimiento y el rendimiento al proporcionar componentes modulares, enlace de datos bidireccional en tiempo real, serialización de objetos con mapeo DOM, manejo de eventos, un ciclo de extracción de componentes administrados, etc.

¿Es MontageJS una alternativa completa de arranque?

No. En realidad, no intenta ser un marco de trabajo sobre el que pueda crear una aplicación web satisfactoria con una configuración mínima. Básicamente se centra en la organización y optimización del código.

Alternativa a Bootstrap: pros y contras

Pros:

  • Proporciona un kit de desarrollo de software completo para crear o administrar aplicaciones modernas de una sola página llamado Montage Studio, aunque la documentación sobre el uso es muy concisa.
  • Facilita la administración de su aplicación y el estado de la interfaz de usuario con enlaces de datos.
  • Los componentes pueden ser aplicaciones HTML independientes, lo que facilita la creación de prototipos y pruebas
  • MontageJS minimiza los costosos reflujos de diseño para ayudar al final del usuario.
  • Utiliza una biblioteca interesante bajo el capó llamada FRB (Functional Reactive Binding) que es básicamente una biblioteca de enlace de datos «reactiva» pero con una sintaxis funcional (que la hace confiable y fácil de extender)

Contras:

  • La documentación para el marco carece tanto de información actualizada como de estructura lógica, hasta el punto de parecer un proyecto abandonado. A lo sumo, no es una biblioteca estable y / o preparada para profesionales.
  • Debido a la mala documentación, es un poco difícil de configurar
  • Tiene más de 100 problemas únicos que requieren la atención de sus mantenedores y / u otros colaboradores.

Github: github.com/montagejs/montage
Popularidad: baja (1515 observadores de estrellas)
Calidad de mantenimiento: mantenida activamente pero la documentación es concisa, deficiente y confusa

14. Pure CSS

pure css - pixelanium - las 30 mejores alternativas a bootstrap
pure css – pixelanium – las 30 mejores alternativas a bootstrap

Pure es un marco CSS desarrollado por YAHOO. Le ayuda a desarrollar sitios web más rápidos, hermosos y receptivos con una huella mínima (el conjunto completo de relojes de módulo ronda los 4 KB). Utiliza Normalize.css y proporciona diseño y estilo para los componentes comunes de la interfaz de usuario. Es como una Normalización mejor y un poco más elegante. Utiliza la arquitectura SMACSS para modularizar el código CSS, lo que lo convierte en un marco modular por naturaleza.

¿Pure CSS es una alternativa completa de arranque?

No. No hay complementos JS que lo acompañen y la base de código CSS es muy minimalista. Es más adecuado como kit de inicio.

Alternativa a Bootstrap: pros y contras

Pros:

  • Huella mínima
  • Modular: Se divide en módulos diferentes e independientes (tablas, sistema de cuadrículas, menú de navegación, etc.)
  • Cada módulo está disponible en un archivo separado y tienen un tamaño de archivo muy pequeño, lo que es un punto a favor para los sitios web que necesitan más eficiencia.

Contras:

  • Cantidad limitada de selectores CSS de utilidad
  • Pure CSS no ha recibido ninguna mejora significativa desde hace bastante tiempo.

Github: github.com/pure-css/pure/
Popularidad: Popular (20,674 astrónomos)
Calidad de mantenimiento: Ha pasado un tiempo desde que se envió la última confirmación (casi 8 meses). Sin embargo, no es realmente un problema si considera que es un marco minimalista.

Alternativas de Boostrap con sucesores

15. Semantic UI

semantic ui- pixelanium - las 30 mejores alternativas a bootstrap
semantic ui- pixelanium – las 30 mejores alternativas a bootstrap

El principal punto de venta de Semantic es que permite escribir código HTML significativo y legible por humanos (por lo tanto, la semántica) en lugar de utilizar metodologías detalladas y poco intuitivas centradas en BEM o SMACSS.

Tiene una gran colección de elementos de interfaz de usuario reutilizables que se pueden colocar en cualquier lugar de su código HTML para obtener resultados instantáneos. La interfaz de usuario semántica también es amigable para los desarrolladores, incluida la depuración de las capacidades de JS de forma nativa.

El proyecto original ya no se mantiene, pero hay una bifurcación mantenida por la comunidad llamada Fomantic UI , que tiene un mantenimiento activo.

¿Es la interfaz de usuario semántica una alternativa completa de arranque? .

Sí, excepto por el hecho de que no hay clases de servicios públicos.

Alternativa a Bootstrap: pros y contras

Pros:

  • Diseñado para funcionar en múltiples plataformas y dispositivos
  • Los complementos JS incluidos se pueden depurar fácilmente
  • Código HTML amigable para los humanos
  • Tematización extensible

Contras:

  • No hay clases de utilidad como Bootstrap (debido al uso intensivo del marcado semántico)
  • Sin sistema de diseño formal (los componentes de la interfaz de usuario son creados por la comunidad siguiendo pautas flexibles)
  • Una gran cantidad de problemas (aproximadamente 850+) están esperando obtener respuestas de los contribuyentes de Semantic UI (mientras tanto, use la bifurcación de Fomantic UI, la bifurcación oficial de la comunidad)

Github: github.com/semantic-org/semantic-ui/
Popularidad: Muy popular (47.589 astrónomos)
Calidad de mantenimiento: la actividad del repositorio oficial está obsoleta pero su sucesor (Fomantic UI) se mantiene activamente

Sucesor:

Github: github.com/fomantic/fomantic-ui/
Popularidad: baja (1618 observadores de estrellas)
Calidad de mantenimiento: mantenida activamente

Aprenda la interfaz de usuario semántica

16. Material Design Lite

material design lite - pixelanium - las 30 mejores alternativas a bootstrap
material design lite – pixelanium – las 30 mejores alternativas a bootstrap

Material Design es un sistema de diseño inventado por los diseñadores creativos de Google. Rápidamente se hizo popular debido a su experiencia de usuario limpia y ordenada. Luego, los diseñadores de Google lanzaron un marco CSS completo llamado Material Design Lite para obtener ayuda de la comunidad de código abierto para su posterior desarrollo.

Material Design Lite agrega la apariencia de Material Design a sus sitios web de contenido estático. No depende de marcos o bibliotecas de JavaScript. Optimizado para uso en varios dispositivos, se degrada con gracia en navegadores más antiguos y ofrece una experiencia a la que se puede acceder desde el principio.

Este proyecto ya no se mantiene. Sin embargo, hay un proyecto que se mantiene activamente llamado Material Components Web , que es el repositorio de Github para el proyecto oficial de Material . Amplía lo que ofrece Material Design Lite, proporcionando una personalización de temas más flexible, no solo en términos de color, sino también de tipografía, forma, estados y más. También está diseñado específicamente para adaptarse a varios marcos web importantes.

¿Es Material Design Lite una alternativa completa de arranque?

No. El repositorio oficial actual para los componentes de Material ofrece una experiencia más completa construida alrededor del sistema de diseño de Material. Sin embargo, son solo componentes, por lo que no hay un concepto de clases de utilidad o cualquier otro concepto extensible fuera de un sistema de diseño.

Alternativa a Bootstrap: pros y contras

Pros:

  • Está impulsado por el gigante tecnológico Google.
  • Proporciona componentes de diseño de materiales listos para usar.

Contras:

  • Construido en torno a un sistema de diseño específico, por lo que se puede ampliar hasta cierto punto (sin clases de servicios públicos, por ejemplo)
  • Ya no se mantiene

Github: github.com/google/material-design-lite
Popularidad: Muy popular (31.562 astrónomos)
Calidad de mantenimiento: Ya no se mantiene

Sucesor:

Github: github.com/material-components/material-components-web
Popularidad: Popular (14.084 astrónomos)
Calidad de mantenimiento: Mantenido activamente

Aprenda a crear sitios web con Material Design Lite de Google

Alternativas de Boostrap que ya no son mantenidos

17. Groundwork

groundworkcss - pixelanium - las 30 mejores alternativas a bootstrap
groundworkcss – pixelanium – las 30 mejores alternativas a bootstrap

El framework Groundwork CSS es un framework HTML5, CSS y Javascript receptivo. Tiene soporte completo para atributos de «estado / rol ARIA» y selectores de elementos semánticos

¿Es Groundwork una alternativa completa de bootstrap?

No, ya no se mantiene.

Alternativa a Bootstrap: pros y contras

Pros:

  • Tiene un sistema de cuadrícula receptivo que se puede anidar fácilmente para crear diseños web complejos.
  • Creación rápida de prototipos y estructuras alámbricas con texto, imágenes y fuentes dinámicos de marcador de posición

Contras:

  • El código fuente de Groundwork en Github lo archiva su propietario, por lo que ya no se mantiene.

Github: github.com/groundworkcss/groundwork
Popularidad: baja (1.683 observadores de estrellas)
Calidad de mantenimiento: ya no se mantiene

18. Cardinal

cardinal - pixelanium - las 30 mejores alternativas a bootstrap
cardinal – pixelanium – las 30 mejores alternativas a bootstrap

Cardinal es un marco CSS modular, «móvil primero» creado pensando en el rendimiento y la escalabilidad. No tiene ningún diseño de interfaz de usuario innecesario relacionado con el código, lo que hace que su estructura sea muy ligera en comparación con Bootstrap. Además, permite un control total sobre la apariencia de los sitios web.

¿Cardinal es una alternativa completa de bootstrap?

No, ya no se mantiene.

Alternativa a Bootstrap: pros y contras

Pros:

  • La versión reducida del marco Cardinal está disponible con un tamaño de archivo de casi 11 KB, lo que es perfecto para sitios web que deben cargarse en los primeros segundos.
  • Es muy fácil escalar la base de código existente a medida que crece su proyecto.

Contras:

  • Ya no se mantiene

Github: github.com/cardinalcss/cardinalcss
Popularidad: baja (707 astrónomos)
Calidad de mantenimiento: ya no se mantiene

19. Flexbox grid

flexbox grid - pixelanium - las 30 mejores alternativas a bootstrap
flexbox grid – pixelanium – las 30 mejores alternativas a bootstrap

Flexbox es un sistema de cuadrícula basado en la propiedad de pantalla flexible. El sistema de cuadrícula es muy similar al sistema basado en flex de Bootstrap 4.

¿Flexbox Grid es una alternativa completa de arranque?

No, es solo un sistema de cuadrícula. Además, ya no se mantiene, así que elija cualquier otro marco activo. Si solo desea un sistema de cuadrícula, considere usar CSS Grid nativo .

Alternativa a Bootstrap: pros y contras

Pros:

  • Puede hacer que su página web sea receptiva y fluida.
  • Muy fácil de entender si ya está familiarizado con los conceptos básicos del framework Bootstrap.

Contras:

  • Viene con un sistema de cuadrícula moderno, pero no tiene elementos de interfaz de usuario listos para usar. Entonces, tienes que diseñar las páginas web desde cero.
  • Flexbox se utiliza para diseñar diseños unidimensionales simplificados, con un diseño de línea recta, y es más adecuado para componentes de aplicaciones y diseños a pequeña escala.
  • Ya no se mantiene

Github: github.com/kristoferjoseph/flexboxgrid
Popularidad: Popular (8736 astrónomos)
Calidad de mantenimiento: Ya no se mantiene

20. Susy

susy - pixelanium - las 30 mejores alternativas a bootstrap
susy – pixelanium – las 30 mejores alternativas a bootstrap

Susy es un motor de diseño de cuadrícula liviano para Sass, diseñado para simplificar el uso de diseños de cuadrícula sin interferir en su camino, ya sea que la cuadrícula sea flotante, flexible o basada en tablas. Susy trabaja directamente en el estilo de las clases que ha definido y personalizado.

Fue creado en una época en la que no existía CSS Grid nativo y el soporte de flexbox era muy limitado, por lo que no hay muchas razones para usarlo hoy en día.

¿Es Susy una alternativa completa de bootstrap?

No, es solo un sistema de cuadrícula para proyectos basados ​​en Sass. Además, ya no se mantiene.

Alternativa a Bootstrap: pros y contras

Pros:

  • Muy flexible
  • Proporciona una guía de instalación paso a paso ya sea que esté utilizando Eyeglass, Webpack, Gulp, Grunt o incluso Yeoman.
  • No requiere agregar clases al marcado.

Contras:

  • Es solo un sistema de cuadrícula
  • Para empezar a utilizarlo es necesario tener instalado Sass y un mínimo de conocimientos al respecto.
  • No tiene componentes preexistentes.
  • Ya no se mantiene

Github: github.com/oddbird/susy
Popularidad: baja (3.943 observadores de estrellas)
Calidad de mantenimiento: ya no se mantiene

21. Inuit

inuitcss - pixelanium - las 30 mejores alternativas a bootstrap
inuitcss – pixelanium – las 30 mejores alternativas a bootstrap

Inuit es un marco en su sentido más verdadero: no le proporciona una interfaz de usuario y un diseño listos para usar, sino que le proporciona una base arquitectónica sólida sobre la cual completar su propio trabajo.

Básicamente, describe una estructura organizativa de código CSS y establece la ruta para hacer que la creación de la interfaz de usuario (sistema de diseño, construcción de componentes, etc.) sea obvia. Aunque afirma ser un marco OOCSS, en realidad es una combinación de OOCSS y BEM.

No tiene estilo, lo que significa que se puede usar en cualquier tipo de proyecto (y lo ha hecho) sin dictar (o incluso sugerir) una apariencia. Si necesita una interfaz de usuario lista para usar, entonces este marco no es la mejor herramienta (por lo tanto, no es realmente una alternativa completa para Bootstrap)

¿Es Inuit Grid una alternativa completa de arranque?

No. No es una buena opción.

Alternativa a Bootstrap: pros y contras

Pros:

  • Es un marco CSS bien estructurado que sigue las mejores metodologías arquitectónicas.
  • Creado por el famoso Harry Roberts de CSS Wizardry, un galardonado especialista en frontend

Contras:

  • No es adecuado para diseñadores web novatos porque tiene una curva de aprendizaje empinada.
  • Dependiente de Sass
  • Sin componentes ni peinados horneados
  • La comunidad ha dejado de contribuir al proyecto desde hace casi un año, aunque los miembros principales a veces participan en discusiones de temas.

Github: github.com/inuitcss/inuitcss
Popularidad: baja (1.613 observadores de estrellas)
Calidad de mantenimiento : el mantenimiento está estancado (las discusiones de la comunidad todavía ocurren)

22. 960 grid system

960 grid system - pixelanium - las 30 mejores alternativas a bootstrap
960 grid system – pixelanium – las 30 mejores alternativas a bootstrap

Como su nombre lo anticipa, 960 Grid System era un marco CSS de cuadrícula adaptado a las aplicaciones de escritorio. Cuando se creó, las aplicaciones web móviles eran casi inexistentes y la mayoría de las ventanas gráficas de escritorio tenían alrededor de 960 px de ancho, de ahí el nombre. Es tan viejo que ni siquiera responde.

¿Es el 960 GS una alternativa completa de arranque?

No, es un sistema de cuadrícula

Alternativa a Bootstrap: pros y contras

Pros:

  • Excelente para diseñar un prototipo rápido de cualquier página web.
  • Pequeña huella de pie

Contras:

  • No proporciona un diseño fluido o receptivo como funcionalidad principal.
  • Desactualizado y ya no se mantiene

El creador de 960 Grid System creó un sucesor llamado Unsemantic, pero ha pasado un tiempo desde que se actualizó por última vez. Si solo necesita utilizar un sistema de cuadrícula, es mejor ceñirse a la cuadrícula CSS nativa.

Github: github.com/nathansmith/960-Grid-System/
Popularidad: Baja (3590 astrónomos)
Calidad de mantenimiento: Ya no se mantiene

Sucesor:

Github: github.com/nathansmith/unsemantic
Popularidad: baja (1.363 observadores de estrellas)
Calidad de mantenimiento: ya no se mantiene

23. Jeet

jeet - pixelanium - las 30 mejores alternativas a bootstrap
jeet – pixelanium – las 30 mejores alternativas a bootstrap

Jeet es un marco CSS de cuadrícula para proyectos basados ​​en Sass o Stylus. Las cuadrículas se escriben usando marcado semántico (como «columna (⅓)») dependiendo del uso intensivo de mixins (funciones Sass / Stylus). Utiliza técnicas obsoletas para diseños (flotadores, clearfixes, etc.).

¿Es HTML5 Boilerplate una alternativa completa de arranque?

No, es un sistema de cuadrícula.

Alternativa a Bootstrap: pros y contras

Pros:

  • Su código fuente es muy ligero porque solo consta de un sistema de cuadrícula receptivo.

Contras:

  • No responde
  • Utiliza técnicas obsoletas para el diseño (flotadores, clearfixes, etc.)
  • Ya no se mantiene

Al igual que otros marcos de solo cuadrícula, es mejor apegarse a CSS Grid nativo hoy en día.

Github: github.com/mojotech/jeet
Popularidad: baja (3053 astrónomos)
Calidad de mantenimiento: ya no se mantiene

24. INK

ink - pixelanium - las 30 mejores alternativas a bootstrap
ink – pixelanium – las 30 mejores alternativas a bootstrap

INK es un marco de diseño web rápido creado por la popular empresa portuguesa SAPO.

Inicialmente, comenzaron este proyecto para acelerar el desarrollo de sus propios sitios web. Pero, con el tiempo, se volvió lo suficientemente flexible como para ser utilizado en cualquier aplicación web.

Tiene todas las funciones de interfaz de usuario de Bootstrap integradas (estilo, diseño, tipografía, personalizable, componentes, complementos JS, etc.).

¿INK Grid es una alternativa completa de arranque? .

Sí, sí, INK definitivamente puede funcionar como una alternativa.

Alternativa a Bootstrap: pros y contras

Pros:

  • Los desarrolladores habían agregado libros de cocina prediseñados en el marco de INK a través de los cuales puede personalizar rápidamente un tema y usarlo (comenzar desde cero también está disponible).

Contras:

  • El proyecto está abandonado ya que todos sus miembros principales dejaron SAPO.

Github: github.com/sapo/Ink/
Popularidad: Baja (1.930 astrónomos)
Calidad de mantenimiento: Ya no se mantiene

25. Skeleton

skeleton - pixelanium - las 30 mejores alternativas a bootstrap
skeleton – pixelanium – las 30 mejores alternativas a bootstrap

Skeleton es una colección de archivos CSS para dispositivos móviles creados para desarrollar rápidamente sitios web que se adaptan a cualquier resolución de pantalla (con capacidad de respuesta por diseño). Su código fuente consta de aproximadamente 200 líneas, por lo que es muy ligero. Tampoco se necesita compilación o instalación. A pesar de las ventajas, utiliza un marcado obsoleto para el diseño (flotantes, clearfix, etc.).

¿Es Skeleton una alternativa completa de bootstrap?

> No, es una colección de archivos CSS repetitivos, destinados a ser un punto de partida, no un marco de interfaz de usuario completo.

Alternativa a Bootstrap: pros y contras

Pros:

  • Pequeña huella de pie
  • No se necesita compilación o instalación
  • Garantiza la visualización de contenido en dispositivos móviles con elegancia y flexibilidad al adaptarse a los navegadores, permitiendo la visualización vertical u horizontal.
  • La cuadrícula de esqueleto es muy simple y el resultado es el mismo en cualquier navegador.

Contras:

  • Ya no se mantiene

Github: github.com/dhg/Skeleton/
Popularidad: Popular cuando todavía se mantenía (17380 astrónomos)
Calidad de mantenimiento: ya no se mantiene

Aprenda a crear sitios web con Skeleton CSS

26. Kickstart

kickstart - pixelanium - las 30 mejores alternativas a bootstrap
kickstart – pixelanium – las 30 mejores alternativas a bootstrap

Kickstart CSS es una biblioteca basada en Bootstrap, pero sin muchos componentes que la convertirían en un marco de interfaz de usuario completo. En ese sentido, es literalmente una biblioteca repetitiva «kickstart».

La mayoría de los marcos CSS avanzados están disponibles con un gran tamaño, lo que a su vez reduce la velocidad de carga de los sitios web. Kickstart encaja mejor en este escenario para minimizar el problema.

¿Kickstart es una alternativa completa de arranque?

No, es una versión simplificada de Bootstrap

Alternativa a Bootstrap: pros y contras

Pros:

  • Muy ligero en comparación con el marco Foundation y Bootstrap.
  • A diferencia de otros marcos CSS, Kickstart no requiere jQuery.

Contras:

  • Si por alguna razón desea admitir navegadores web más antiguos para su audiencia, es posible que Kickstart no sea la opción correcta.
  • Ya no se mantiene

Github: github.com/adamjgrant/kickstart/
Popularidad: baja (1.905 astrónomos)
Calidad de mantenimiento: ya no se mantiene

27. Bootflat

bootflat - pixelanium - las 30 mejores alternativas a bootstrap
bootflat – pixelanium – las 30 mejores alternativas a bootstrap

Bootflat funciona sobre el marco Bootstrap. Entonces, básicamente no es una alternativa de Bootstrap en un verdadero sentido. En cambio, es como una plantilla de inicio o un kit de interfaz de usuario que lo ayuda a crear páginas web modernas más rápidamente.

¿Bootflat es una alternativa completa de bootstrap?

No, ya no se mantiene

Alternativa a Bootstrap: pros y contras

Pros:

  • La mejor opción para la creación de prototipos de páginas web.
  • Se crea de acuerdo con las últimas tendencias de diseño web y funciona en todos los principales navegadores web.

Contras:

  • No es compatible con la última versión del marco Bootstrap (Bootstrap 4).
  • El proyecto Bootflat depende completamente de Bootstrap y no puede funcionar de forma independiente.
  • Ya no se mantiene

Github: github.com/bootflat/bootflat.github.io
Popularidad: Nicho (4274 astrónomos)
Calidad de mantenimiento: Ya no se mantiene

28. Gumby

gumby - pixelanium - las 30 mejores alternativas a bootstrap
gumby – pixelanium – las 30 mejores alternativas a bootstrap

Gumby es un marco de CSS que puede ayudarlo a crear sitios web receptivos y compatibles con dispositivos móviles. Está repleto de un kit de herramientas de interfaz de usuario, cuadrícula, componentes y extensiones para brindar una experiencia definitiva.

¿Es Gumby una alternativa completa de arranque? Sí, era una opción interesante pero ya no se mantiene.

Alternativa a Bootstrap: pros y contras

Pros:

  • Hace uso de SASS para acelerar la personalización.
  • Tiene una documentación paso a paso sobre cada concepto.

Contras:

  • Los ingenieros han detenido oficialmente su desarrollo.

Github: github.com/GumbyFramework/Gumby
Popularidad: baja ( 2935 observadores de estrellas)
Calidad de mantenimiento: ya no se mantiene

29. Topcoat

topcoat - pixelanium - las 30 mejores alternativas a bootstrap
topcoat – pixelanium – las 30 mejores alternativas a bootstrap

Topcoat no es un marco, es una biblioteca de componentes de código abierto construida completamente sobre estándares web (CSS y HTML).

La biblioteca de Topcoat se puede utilizar junto con cualquier marco de JavaScript (Backbone, Angular, etc.). Es solo una colección de archivos CSS y HTML. Tiene un gran conjunto de componentes de interfaz de usuario prediseñados que están listos para ser incluidos en cualquier proyecto de diseño web.

s ¿La capa superior es una alternativa completa de arranque? No, ya no se mantiene.

Alternativa a Bootstrap: pros y contras

Pros:

  • Tiene soporte completo para Internet Explorer 8+ más antiguo, así como para la mayoría de los navegadores web modernos.

Contras:

  • Ya no se mantiene

Github: github.com/topcoat/topcoat/
Popularidad: baja (4289 astrónomos)
Calidad de mantenimiento: ya no se mantiene

30. HTML Kickstart

html kickstart - pixelanium - las 30 mejores alternativas a bootstrap
html kickstart – pixelanium – las 30 mejores alternativas a bootstrap

El proyecto HTML Kickstart se inició para ayudarlo a acelerar sus tareas de diseño web al proporcionar elementos de diseño prediseñados como menús de navegación, botones y controles deslizantes animados. De esta manera, no tendrá que dedicar mucho tiempo a diseñar una página web. En su lugar, puede concentrarse en entregar un trabajo de calidad en lugar de luchar por cómo hacer las cosas bien.

¿Es HTML Kickstart Grid una alternativa completa de arranque?

Sí, era una gran opción, pero ya no se mantiene.

Alternativa a Bootstrap: pros y contras

Pros:

  • Uno de los mejores marcos de CSS y JavaScript para el diseño rápido de un sitio web.
  • Sus elementos de la interfaz de usuario pueden mostrarse correctamente en navegadores más antiguos.

Contras:

  • Ya no se mantiene.

Github: github.com/joshuagatcke/HTML-KickStart
Popularidad: Baja (1211 astrónomos)
Calidad de mantenimiento: Ya no se mantiene

Conclusión

Hay muchas opciones cuando se trata de diseñar una aplicación web receptiva. Las alternativas mencionadas anteriormente a Bootstrap son adecuadas en diferentes escenarios. Por lo tanto, debe elegir sabiamente si el marco puede lograr lo que necesita o no.

A veces, agregar Bootstrap para una plantilla web pequeña puede no ser la opción correcta porque aporta mucho «peso» adicional que puede ralentizar su sitio web simple.

Un punto a tener en cuenta es que a Google «no le gustan» los sitios web que tardan más de 3 segundos en cargarse. Además, termina disminuyendo la clasificación general de su sitio web. Por lo tanto, debe dedicar algo de tiempo a seleccionar el marco CSS adecuado para sus requisitos específicos.

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*