Bootstrap está en todas partes, pero no siempre es la herramienta adecuada para el trabajo. ¡Aquí hay algunas excelentes alternativas!
Si revisa el código fuente del front-end de un sitio web al azar en estos días, es probable que encuentre Bootstrap debajo. Todos nos hemos acostumbrado tanto a conceptos como container-fluid, row, col-sm-6, etc., que es difícil imaginar que cualquier otro estilo de desarrollo front-end sea posible. Y así, cuando tenemos que construir el próximo proyecto, buscamos Bootstrap inconscientemente. Dicho esto, la popularidad no hace que Bootstrap se ajuste bien a todos los proyectos y necesidades.
De hecho, para frontends realmente esbeltos, cargar todos los Bootstrap CSS y JS puede causar una gran hinchazón.
Este artículo tiene dos propósitos:
Creo que la parte de la explicación es realmente importante porque, en la mayoría de los casos, las personas ni siquiera se dan cuenta de que tienen un problema o de que están dificultando su trabajo al utilizar Bootstrap. Finalmente, tenga en cuenta que esta no es una publicación 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; Además, no soy un desarrollador de interfaz de usuario per se, por lo que no me preocupo por muchas cosas cuando construyo mis interfaces.
Y con eso, echemos un vistazo a las alternativas que tenemos.
Tabla de contenido
Rejilla Flexbox
Piénselo por un minuto: la principal razón por la que comenzó a usar Bootstrap y todavía lo usa es su sistema de cuadrícula. Claro, tomó un tiempo acostumbrarse a las clases fila, col-md-6, etc., pero ahora es una segunda naturaleza pensar en un diseño en términos de filas, columnas, compensaciones, etc.
Y si es honesto consigo mismo, encontrará que trabajar con todo lo demás en Bootstrap es un poco complicado. Hay toneladas de clases para 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 usa Bootstrap solo para la cuadrícula y escribe todos los demás CSS usted mismo.
Si es así, podría hacerlo mucho mejor con Rejilla Flexbox.
Flexbox Grid, como su nombre indica, es un sistema de cuadrícula basado en CSS Caja flexible propiedades. Sin embargo, a diferencia de la técnica CSS, toda la complejidad se abstrae muy bien para que solo se concentre en colocar los elementos de la manera que desee. La mejor parte es que todo el código y los nombres de clase imitan lo que querrías 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 Flexbox Grid:
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
El archivo CSS minimizado para este sistema de cuadrícula es de solo 10,7 KB, lo que le ahorra varios cientos de KB en el tamaño de descarga final. En estos días, Flexbox Grid es mi favorito, ya que no quiero luchar contra Bootstrap para personalizarlo por completo. Me gusta comenzar con elementos de vainilla y diseñarlos yo mismo, usando Flexbox Grid donde sea que lo necesite.
Aprender Flexbox aquí, en línea.
CSS puro
¿No sería bueno si Bootstrap se dividiera en módulos y pudiera importar solo el módulo que necesita?
Bien, CSS puro ha seguido adelante y ha hecho exactamente eso: es un conjunto de módulos que cubren diferentes áreas funcionales de un sitio web. Puede elegir descargar uno o todos y, sin embargo, ¡el tamaño de la descarga no excederá los 3,7 KB!
Sí, lo leiste bien.
Todos los módulos, cuando se agrupan y se comprimen con gzip, ocupan 3,7 KB, aunque individualmente suman más. El módulo de cuadrícula ocupa solo 0,8 KB, mientras que el módulo base ocupa 1,0 KB. El equipo detrás de PureCSS dice que fue construido completamente con dispositivos móviles en mente, por lo que cada línea de CSS fue analizada cuidadosamente para determinar su eficiencia antes de incluirla.
Entonces, digamos que solo necesita el módulo de cuadrícula y formularios. Bueno, simplemente descargue estos dos (junto con el módulo Base), ¡y terminará 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.
Sin embargo, PureCSS tiene sus clases 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ás que ya no hay una cuadrícula de 12 columnas. PureCSS tiene su sistema de cuadrícula que especifica cuánto ancho debe tomar una columna. Entonces, pure-u-lg-1-4 significa que este elemento debería ocupar 1/4 o 25% del ancho disponible en pantallas grandes. También están disponibles anchos en múltiplos de 1/5.
Con todo, PureCSS es una herramienta CSS liberadora y sorprendente (¿marco?) que puede elegir según sea necesario. Dicho esto, viene con una buena cantidad de aceptación y curva de aprendizaje, ya que necesita aprender una nueva forma (ligeramente diferente) de hacer las cosas.
PureCSS también tiene sus propias clases y estilo predeterminado, por lo que no es muy diferente de Bootstrap.
Zimit
los Zimit framework es una especie de extraño en esta lista. Sí, es un marco para crear interfaces de usuario, pero está dirigido a tipos particulares de interfaces de usuario: maquetas.
Hay momentos en los que tienes que desarrollar el front-end para mostrar el funcionamiento del producto. La forma ideal de hacer esto, por supuesto, sería involucrar a un diseñador/desarrollador de interfaz de usuario y crear las maquetas en una de las herramientas avanzadas de creación de esquemas (Moqups, Blasmic, etc., vienen a la mente). Las páginas tendrían píxeles perfectos, la combinación de colores elegante y bien elegida, y las páginas estarían abiertas para participación, reseñas, comentarios, etc.
Pero la vida real no es ideal y, a menudo, usted es el único hombre en el trabajo y debe usar todos los sombreros y hacer el trabajo. En esos momentos, desea un marco que:
- Le permite codificar en HTML/CSS
- es ligero
- Tiene una extensa colección de componentes fundamentales.
- Tiene un lenguaje de estilo decente y consistente.
- Si es posible, se asemeja al tono «grisáceo» del diseño de estructura alámbrica
- es facil de aprender
- Tiene algún preprocesador CSS incorporado
Zimit marca todas estas casillas. Tiene solo 84 KB de tamaño y tiene una amplia gama de componentes para elegir. Aquí hay algunos ejemplos que encontré realmente atractivos, ya que codificarlos por su cuenta llevará mucho tiempo.
Vista de árbol
Migaja de pan
Pestañas
Hay muchas más cosas para explorar. Échales un vistazo aquí.
Veamos cómo se ve el código. Así es como usaría el sistema de cuadrícula en Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
La «c» aquí significa «columna», por lo que «c4» significa una columna que abarca cuatro unidades (la cuadrícula tiene un tamaño de 12, como la de Bootstrap). Muy similar a Bootstrap, y muy intuitivo, en mi opinión.
Con todo, Zimit es un marco completo y fácil para desarrollar prototipos de interfaz de usuario que respondan y se vean bien rápidamente. Es mejor que Bootstrap (cuando se trata de creación de prototipos) porque Bootstrap es una descarga mucho más grande y el diseño resultante es, bueno, de mal gusto.
Inicio rápido de HTML
En la mayoría de los proyectos que crea, la velocidad es fundamental. El mayor obstáculo para acelerar el desarrollo web es la parte frontal, y el mayor «retraso» en el desarrollo frontal es la necesidad de codificar componentes interactivos de apariencia elegante. Dado que un componente se puede comportar de muchas formas y hay muchos tamaños de pantalla para administrar, codificar y administrar componentes puede convertirse en una pesadilla para el desarrollador.
Inicio rápido de HTML ofrece una alternativa.
En pocas palabras; es una colección de componentes realmente elegantes que puede colocar en sus proyectos y reducir drásticamente el tiempo de desarrollo. Aquí hay algunos buenos componentes que encontré:
Desplegable
Botones
Pestañas (centradas y con iconos)
Materializar
Si te gusta Bootstrap por el hecho de que tiene una solución preparada para todos los problemas comunes de diseño web, pero eres fanático del estilo de diseño de materiales, deberías probar Materializar.
Materialise es en su mayoría como Bootstrap: sistema de cuadrícula de 12 puntos, compensaciones y componentes familiares como formularios, tarjetas, etc. Sin embargo, tiene ciertas ventajas que pueden atraer a muchos.
Empujar tirar
La función push/pull de Materialise CSS le permite reordenar las columnas. Esto recuerda al nuevo estándar CSS Grid, donde el diseño es diferente del orden de los elementos.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
Esto da como resultado lo siguiente:
Notarás que las columnas han cambiado de lugar, lo cual es algo quizás inalcanzable en el CSS tradicional basado en Bootstrap.
golosinas de JavaScript
Hay bastantes funciones y efectos de JavaScript que se envían con Materialise. Tooltips, Toasts (notificaciones efímeras tipo Android), Parallex, Pushpin, etc., son algunos de ellos. Un efecto realmente sorprendente que me gustó es FeatureDiscovery, que básicamente te permite resaltar un elemento en la página en algún evento (por ejemplo, presionar un botón) para atraer la atención del usuario hacia 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.
Con todo, Materialise es una excelente alternativa a Bootstrap o para aquellos que buscan adoptar un marco CSS de Material con todas las funciones.
Conclusión
Bootstrap es sinónimo de diseño responsive. Fue Bootstrap quien popularizó el término «diseño móvil primero» y mostró cómo se podía hacer. Pero aunque Bootstrap hace el trabajo la mayor parte del tiempo, no siempre es suficiente hacerlo. Si siente que Bootstrap lo está restringiendo y que sus necesidades son especiales, una de las opciones enumeradas aquí lo ayudará. 🙂