Las 8 mejores alternativas a Bootstrap

Bootstrap está en todas partes, pero no siempre es la herramienta adecuada para el trabajo. Aquí tiene algunas alternativas estupendas

Si revisa el código fuente del front-end de un sitio web al azar en estos días, lo más probable es que encuentre Bootstrap debajo.

Todos nos hemos acostumbrado tanto a conceptos como contenedor-fluido, fila, col-sm-6, etc., que es difícil imaginar que cualquier otro estilo de desarrollo front-end sea siquiera posible. Y así, cuando tenemos que construir el próximo proyecto, echamos mano de Bootstrap inconscientemente. Dicho esto, la popularidad no hace que Bootstrap sea una buena opción para todos los proyectos y necesidades.

De hecho, para frontends realmente delgados, cargar todo el CSS y JS de Bootstrap puede causar un bloat importante.

Este artículo tiene dos propósitos:

1. Proporcionar alternativas vivas a Bootstrap que no sean similares a Bootstrap
2. Explicar por qué es posible que desee considerar estas alternativas sobre Bootstrap

Creo que la parte de la explicación es realmente importante porque, en la mayoría de los casos, la gente ni siquiera se da cuenta de que tiene un problema o de que está dificultando su trabajo al elegir Bootstrap. Por último, tenga en cuenta que este no es un post anti-Bootstrap de ninguna manera.

Me encanta Bootstrap 4 y lo uso siempre que puedo. Pero, entonces, soy un desarrollador individual que tiene que pensar en usar la solución más popular; también, no soy un desarrollador de UI per se, así que no me preocupo de demasiadas cosas cuando construyo mis front-ends.

Y con eso, echemos un vistazo a las alternativas que tenemos.

Rejilla Flexbox

Piénselo por un minuto: la mayor razón por la que empezó a usar Bootstrap y lo sigue usando es su sistema de cuadrícula. Claro, tomó algún tiempo acostumbrarse a la fila, col-md-6, etc, las clases, pero ahora es una segunda naturaleza a pensar en un diseño en términos de filas, columnas, desplazamientos, etc.

Y si es sincero consigo mismo, descubrirá que todo lo demás en Bootstrap es un poco pesado de trabajar.

Hay toneladas de clases que recordar, ya sea que esté haciendo formularios, navegación, botones, tablas o cualquier otra cosa. Si es como yo, todavía no se ha acostumbrado a todas las clases y lo que hacen, y a menudo utiliza Bootstrap sólo para la rejilla y escribe todo el resto de CSS usted mismo.

Si es así, podría hacerlo mucho mejor con Flexbox Grid.

La rejilla Flexbox, como su nombre indica, es un sistema de rejilla basado en las propiedades Flexbox de CSS. Sin embargo, a diferencia de la técnica CSS, toda la complejidad está bien abstraída para que usted se centre únicamente en colocar los elementos de la forma que desee.

La mejor parte es que todo el código y los nombres de las clases imitan lo que usted querría en Bootstrap 4, lo que significa que cambiar entre estas dos herramientas requiere cero fricción mental. Por ejemplo, así es como se ve el código para el «espacio alrededor» en la Rejilla Flexbox:

<div class="fila alrededor-xs">
    <div class="col-xs-2">
        <div class="box">
            alrededor de
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            alrededor de
        </div> <div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            alrededor de
        </div> <div>
    </div>
</div>

El archivo CSS minificado para este sistema de rejilla es de apenas 10,7 KB ahorrándole varios cientos de KB en el tamaño final de la descarga. En estos días la Rejilla Flexbox es mi favorita ya que no quiero pelearme con Bootstrap para personalizarla completamente. Me gusta empezar con elementos vainilla y darles estilo yo mismo, utilizando la Rejilla Flexbox donde sea necesario.

Aprenda Flexbox aquí, en línea.

PureCSS

¿No estaría bien que Bootstrap estuviera dividido en módulos y que usted pudiera importar sólo el módulo que necesita?

Bueno, PureCSS se ha adelantado y ha hecho justamente eso — es un conjunto de módulos que cubren diferentes áreas funcionales de un sitio web. Puede elegir descargar uno o todos, ¡y aún así el tamaño de la descarga no superará los 3,7 KB!

Sí, ha leído bien.

Todos los módulos juntos y comprimidos en gzip ocupan 3,7 KB, aunque individualmente suman más. El módulo de rejilla es de sólo 0,8 KB, mientras que el módulo Base es de 1,0 KB. El equipo detrás de PureCSS dice que fue construido enteramente con los dispositivos móviles en mente, y así cada línea de CSS fue cuidadosamente escudriñada para la eficiencia antes de ser incluida.

Así que digamos que sólo necesita la rejilla y el módulo de formularios. Bien, sólo tiene que descargar estos dos (junto con el módulo Base), ¡y habrá terminado en menos de 3,4 KB! No es necesario incluir el CSS de los módulos Botones, Tablas y Menús si no los va a utilizar.

PureCSS tiene sus clases, sin embargo, y el código resultante no imita el Bootstrap al que podría estar muy acostumbrado:

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
        </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Dolor Sit Amet</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Proident laborum</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Praesent consectetur</h3>
       </div>
    </div>
</div>

Notará que ya no hay rejilla de 12 columnas. PureCSS tiene su sistema de rejilla que especifica cuánto ancho debe ocupar una columna. Así, pure-u-lg-1-4 significa que este elemento debe ocupar 1/4 o 25% del ancho disponible en pantallas grandes. También están disponibles anchuras como múltiplos de 1/5.

En definitiva, PureCSS es una herramienta(¿marco?) CSS liberadora y asombrosa de la que puede escoger según sus necesidades. Dicho esto, viene con una buena cantidad de compra y una curva de aprendizaje, ya que hay que aprender una nueva forma (ligeramente diferente) de hacer las cosas.

PureCSS también tiene sus propias clases y estilo por defecto, así que en eso, no es demasiado diferente de Bootstrap.

Zimit

El framework Zimit es una especie de extraño en esta lista. Sí, es un framework para construir UIs, pero está dirigido a tipos particulares de UI: maquetas.

Hay ocasiones en las que hay que desarrollar el front-end para mostrar el funcionamiento del producto. La forma ideal de hacerlo, por supuesto, sería involucrar a un diseñador/desarrollador de IU y crear las maquetas en una de las herramientas avanzadas de wireframing (me vienen a la mente Moqups, Blasmic, etc.).

Las páginas serían perfectas en píxeles, la combinación de colores elegante y bien elegida, y las páginas estarían abiertas a la participación, las revisiones, los comentarios, etc.

Pero la vida real no es ideal, y a menudo usted es el único hombre en el trabajo y debe llevar todos los sombreros y hacer el trabajo. En esos momentos, usted quiere un framework que

• Le permita codificar en HTML/CSS
• Sea ligero
• Tenga una amplia colección de componentes fundamentales
• Tenga un lenguaje de estilo decente y coherente
• A ser posible, se asemeje al tono «grisáceo» del diseño wireframe
• Es fácil de aprender
• Tiene algún preprocesador CSS incorporado

Zimit cumple todos estos requisitos. Sólo ocupa 84 KB y tiene una amplia gama de componentes entre los que elegir. He aquí algunos ejemplos que me han parecido realmente atractivos, ya que codificarlos por su cuenta le llevará mucho tiempo.

Vista en árbol

Miga de pan

Pestañas

Hay muchas más bondades para explorar. Écheles un vistazo aquí.

Veamos el aspecto del código. Así es como se utilizaría el sistema de rejilla en Zimit:

<div class="fila">
   <div class="c12">
      <div class="row">
         <div class="c4">4 columnas</div>
         <div class="c4">4 columnas</div>
      </div>
      <div class="row">
         <div class="c4">4 columnas</div>
         <div class="c4">4 columnas</div>
      </div>
   </div>
</div>

La «c» aquí significa «columna», por lo que «c4» significa una columna que abarca cuatro unidades (siendo la cuadrícula de tamaño 12, igual que la de Bootstrap). Muy similar a Bootstrap, y muy intuitivo, en mi opinión.

En definitiva, Zimit es un framework completo y sencillo para desarrollar prototipos de interfaz de usuario que sean responsivos y tengan buen aspecto rápidamente. Es mejor que Bootstrap (cuando se trata de crear prototipos) porque Bootstrap supone una descarga mucho mayor y el diseño resultante es, bueno, hortera.

Tailwind

Tailwind CSS crea clases de utilidad en lugar de estilos de componentes predefinidos.

Este marco permite a los desarrolladores utilizar clases de utilidad para controlar las sombras, la tipografía, el diseño, el espaciado y mucho más, creando diseños de componentes personalizados en archivos HTML sin necesidad de escribir código.

Puede crear un formulario sencillo que permita a los usuarios registrarse de la siguiente manera;

<div&gt

<form class="m-4 flex"&gt

<input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="dirección de correo electrónico"/&gt

<button class="px-8 rounded-r-lg bg-green-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Suscribirse</button&gt

</form&gt

</div&gt

Puede personalizar diferentes cosas como el color del texto, el color de fondo y el tamaño del borde para adaptarlo a sus necesidades.

¿Por qué Tailwind CSS?

• Baja especificidad: Los selectores de Tailwind son menos específicos, por lo que es menos probable que anulen o entren en conflicto con otros estilos. Por lo tanto, puede escribir menos código al utilizar las clases de utilidad de Tailwind y seguir produciendo código mantenible.
• Opinable y flexible: Tailwind está diseñado para lograr un equilibrio entre un marco personalizable y flexible. Este marco recomienda utilizar una paleta de colores, una escala de espaciado y una tipografía coherentes. Sin embargo, aún puede personalizar algunos valores predeterminados para adaptarlos a sus necesidades.
• Just-In-Time (JIT) mejora el tiempo de compilación: La función JIT ofrece una forma eficiente y más rápida de generar el código CSS final. Con esta característica, Tailwind sólo genera los estilos que se utilizan en su código HTML. Básicamente, cada vez que cargue una página web, su navegador enviará una petición al servidor JIT, que generará un código CSS optimizado para ese archivo específico y lo devolverá al navegador.

Tailwind CSS es adecuado si busca un marco de trabajo con menos especificidad, desea crear diseños personalizados y seguir disfrutando de flexibilidad.

Bulma

Bulma es un marco de interfaz de usuario de código abierto basado en Flexbox. El marco cuenta con una variedad de componentes frontales listos para usar que puede combinar para crear interfaces visualmente atractivas y con capacidad de respuesta.

La facilidad de configuración es una de las razones por las que Bulma está ganando popularidad entre los desarrolladores de interfaz de usuario.

Para demostrar cómo funciona, crearemos varias pestañas utilizando este código;

<div class="tabs"&gt

  <ul&gt

    <li class="is-active"><a>Fotos</a></li&gt

    <li><a>Música</a></li&gt

    <li><a>Vídeos</a></li&gt

    <li><a>Documentos</a></li&gt

  </ul&gt

</div&gt

La página renderizada aparecerá como sigue;

Puede seguir adelante y personalizar las pestañas como mejor le parezca. Por ejemplo, puede cambiar los enlaces activos por inactivos, centrar las pestañas, cambiar el texto de las pestañas y mucho más.

¿Por qué Bulma?

• Bulma tiene un sistema de cuadrícula de 12 columnas, que le permite dividir su página en columnas de igual anchura. Lo mejor es que estas cuadrículas se autoajustan en función del tamaño de la pantalla.
• Si está deseando personalizar su aplicación, Bulma es perfecto ya que viene con unos cuantos valores predeterminados.
• Este framework también ofrece mucha flexibilidad, ya que se basa en Flexbox.
• Bulma es ligero, ya que utiliza un mínimo de JavaScript, lo que resulta en aplicaciones más pequeñas.

Bulma se adapta a los desarrolladores que buscan un framework de interfaz de usuario que sea sencillo pero potente. El toque moderno de los componentes de Bulma se adapta a los diseñadores que no quieren utilizar diseños Bootstrap genéricos y de la vieja escuela.

UIkit

UIkit es un framework ligero y modular para desarrollar potentes interfaces web. Puede utilizar este framework con CSS, Less y Sass. Será la alternativa ideal a Bootstrap si desea una plataforma con sólidos componentes HTML, CSS y JavaScript.

Para utilizar UIkit en su código, incluya su enlace CDN en la sección <head>. También puede compilar el código fuente desde GitHub.

Una vez que haya terminado con la instalación, puede empezar a utilizar varios componentes. Por ejemplo, puede añadir un componente uk-button de la siguiente manera;

<button className="uk-button uk-button-primary">Mi Botón</button&gt

Por qué UIkit

• Arquitectura modular: Los componentes de UIkit son autosuficientes. Así, puede incluir en su aplicación sólo lo que necesite. Este enfoque reduce el tamaño de sus archivos JavaScript y CSS.
• Plugins JavaScript incorporados: Puede ampliar la funcionalidad de UIkit a través de sus plugins JavaScript, como pestañas, modales y deslizadores.
• Personalización: La disponibilidad de variables y mixins Sass da más margen para la personalización. De este modo, podrá crear diseños únicos que se adapten a las necesidades de su aplicación.
• Herramientas de autocompletado de UIkit para su editor: Puede añadir plugins de UIkit o fragmentos de código a su editor de código favorito, como Visual Studio Code, Sublime Text 3 o Atom, y obtener una ayuda en la generación de clases y marcado de UIkit.

UIkit será una opción perfecta para los desarrolladores que busquen un diseño moderno y diferenciado. Autocompletar UIkit para su editor

HTML KickStart

En la mayoría de los proyectos que usted construye, la velocidad es crítica. El mayor obstáculo para la velocidad en el desarrollo web es la parte front-end, y el mayor «retardador» en el desarrollo front-end es la necesidad de codificar componentes interactivos de aspecto elegante.

Puesto que hay muchas formas en las que un componente puede comportarse, y hay muchos tamaños de pantalla que gestionar, codificar y gestionar componentes puede convertirse en una pesadilla para el desarrollador.

HTML KickStart ofrece una alternativa.

En pocas palabras; es una colección de componentes realmente elegantes que puede simplemente soltar en sus proyectos y reducir el tiempo de desarrollo drásticamente. Aquí están algunos componentes agradables que encontré:

Desplegable

Botones

Pestañas (centradas y con iconos)

Materialize

Si le gusta Bootstrap por el hecho de que tiene una solución preparada para todos los problemas comunes de diseño web, pero es un fan del estilo de diseño Material, debería probar Materialize.

Materialize es en su mayor parte igual que Bootstrap: sistema de rejilla de 12 puntos, desplazamientos y componentes familiares como formularios, tarjetas, etc. Sin embargo, tiene ciertas bondades que pueden atraer a muchos.

Push-pull

La función push/pull de Materialize CSS le permite reordenar las columnas. Esto recuerda al nuevo estándar CSS Grid, donde la disposición es diferente del orden de los elementos.

<div class="fila">
      <div class="col s7 push-s5"><span class="flow-text">Este div tiene 7 columnas de ancho al ser empujado hacia la derecha por 5 columnas.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">Este div tiene un ancho de 5 columnas empujado hacia la izquierda por 7 columnas.</span></div>
</div>

El resultado es el siguiente:

Notará que las columnas han cambiado de lugar, algo quizás inalcanzable en el CSS tradicional basado en Bootstrap.

Cosas buenas de JavaScript

Hay bastantes características y efectos de JavaScript que vienen con Materialize. Tooltips, Toasts (notificaciones efímeras similares a las de Android), Parallex, Pushpin, etc., son algunas de ellas.

Un efecto realmente sorprendente que me ha gustado es FeatureDiscovery, que básicamente permite resaltar un elemento de la página en algún evento (digamos, la pulsación de un botón) para llamar la atención del usuario sobre ese elemento. Es difícil describirlo completamente con palabras, así que diríjase a https://materializecss.com/feature-discovery.html para ver a qué me refiero.

En definitiva, Materialize es una gran alternativa a Bootstrap o para aquellos que buscan adoptar un marco CSS Material completo.

Conclusión

Bootstrap es sinónimo de diseño responsivo. Fue Bootstrap el que popularizó el término «diseño mobile-first» y mostró cómo se podía hacer. Pero aunque Bootstrap hace el trabajo la mayoría de las veces, hacer el trabajo no siempre es suficiente.

Si siente que Bootstrap le está limitando y que sus necesidades son especiales, una de las opciones que se enumeran aquí le ayudará.

También puede leer cómo añadir Bootstrap a Angular.