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 de la interfaz 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 las interfaces realmente esbeltas, cargar todos los Bootstrap CSS y JS pueden causar una gran hinchazón.
Este artículo tiene dos propósitos:
- Proporcionar alternativas en vivo no similares a Bootstrap a Bootstrap
- Explique por qué es posible que desee considerar estas alternativas en lugar de Bootstrap
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 haciendo su trabajo más difícil al utilizar Bootstrap. Finalmente, tenga en cuenta que esto es no una publicación anti-Bootstrap por cualquier medio.
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.
Flexbox Grid
Piénselo por un minuto: la razón principal por la que comenzó a usar Bootstrap y todavía lo está usando es su sistema de cuadrícula. Claro, me tomó un tiempo acostumbrarse a la row, col-md-6, etc., clases, 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 Flexbox 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 minificado para este sistema de cuadrícula tiene 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 vainilla y diseñarlos yo mismo, usando Flexbox Grid donde sea que lo necesite.
Aprender Flexbox aquí, en línea.
PureCSS
¿No sería bueno si Bootstrap se dividiera en módulos y pudiera importar solo el módulo que necesita?
Bueno, CSS puro ha seguido adelante y ha hecho precisamente 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 superará los 3.7 KB.
Sí, has leído bien eso.
Todos los módulos cuando están agrupados y comprimidos con gzip tienen 3.7 KB, aunque individualmente suman más. El módulo de cuadrícula tiene solo 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 teniendo en cuenta los dispositivos móviles, por lo que cada línea de CSS se examinó cuidadosamente para determinar su eficiencia antes de ser incluida.
Digamos que solo necesita el módulo de cuadrícula y formularios. Bueno, simplemente descargue 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 de 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á 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 una 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
El 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 UI: maquetas.
Hay ocasiones en las que hay 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, eres el único hombre en el trabajo y debes 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 parece al tono "grisáceo" del diseño de estructura metálica.
- Es fácil de aprender
- Tiene un preprocesador CSS incorporado
Zimit marca todas estas casillas. Tiene un tamaño de solo 84 KB y una amplia gama de componentes para elegir. Aquí hay algunos ejemplos que me parecieron realmente atractivos, ya que codificarlos por su cuenta llevará mucho tiempo.
Vista de árbol
Breadcrumb
Pestañas
Hay muchas más cosas que 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, al igual que 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.
Tailwind
Tailwind CSS crea clases de utilidad en lugar de estilos de componentes predefinidos.
Este marco permite a los desarrolladores usar clases de utilidad para controlar las sombras, la tipografía, el diseño, el espaciado y más, creando diseños de componentes personalizados en archivos HTML sin escribir código.
Puede crear un formulario simple que permita a los usuarios registrarse de la siguiente manera;
<div>
<form class="m-4 flex">
<input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="email address"/>
<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">Subscribe</button>
</form>
</div>
Puede personalizar diferentes cosas, como el color del texto, el color de fondo y el tamaño del borde para satisfacer 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 usar las clases de utilidad de Tailwind y aún producir código mantenible.
- Obstinado 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 satisfacer sus necesidades.
- Just-In-Time (JIT) mejora el tiempo de construcción: La característica JIT ofrece una forma eficiente y más rápida de generar el código CSS final. Con esta función, Tailwind solo genera estilos que se utilizan en su código HTML. Básicamente, cada vez que carga una página web, su navegador enviará una solicitud al servidor JIT, que generará un código CSS optimizado para ese archivo específico y lo enviará de vuelta al navegador.
Tailwind CSS es adecuado si está buscando un marco con menos especificidad, desea crear diseños personalizados y aún así disfrutar de la flexibilidad.
Bulma
Bulma es un marco de interfaz de usuario de código abierto basado en Flexbox. El marco tiene una variedad de componentes de interfaz listos para usar que puede combinar para crear visualmente entractive e interfaces receptivas.
La facilidad de configuración es una de las razones por las que Bulma está ganando popularidad entre los desarrolladores de UI.
Para demostrar cómo funciona, crearemos varias pestañas usando este código;
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>La página renderizada aparecerá de la siguiente manera;
Puede continuar y personalizar las pestañas como mejor le parezca. Por ejemplo, puede cambiar los enlaces activos a inactivos, centrar las pestañas, cambiar el texto de las pestañas y más.
¿Por qué Bulma?
- Bulma tiene un sistema de cuadrícula de 12 columnas, lo que le permite dividir su página en columnas de igual ancho. La belleza es que estas cuadrículas se ajustan automáticamente según el tamaño de la pantalla.
- Si desea personalizar su aplicación, Bulma es perfecta ya que viene con algunos valores predeterminados.
- Este marco también ofrece mucha flexibilidad ya que está basado en Flexbox.
- Bulma es liviana, ya que utiliza JavaScript mínimo, lo que da como resultado aplicaciones más pequeñas.
Bulma se adapta a los desarrolladores que buscan un marco de interfaz de usuario que sea simple pero potente. El toque moderno de los componentes de Bulma se adapta a los diseñadores que no quieren usar diseños Bootstrap genéricos y de la vieja escuela.
UIkit
UIkit es un marco ligero y modular para desarrollar potentes interfaces web. Puede usar este marco con CSS, Less y Sass. Esta será la alternativa ideal de Bootstrap si desea una plataforma con componentes sólidos de HTML, CSS y JavaScript.
Para usar UIkit en su código, incluya su enlace CDN en el <head> sección. También puede compilar el código fuente de GitHub.
Una vez que haya terminado con la instalación, puede comenzar a usar varios componentes. Por ejemplo, puede agregar un uk-button componente como sigue;
<button className="uk-button uk-button-primary">My Button</button>
¿Por qué kit de interfaz de usuario?
- Arquitectura modular: Los componentes de UIkit son autosuficientes. Por lo tanto, puede incluir solo lo que necesita en su aplicación. Este enfoque reduce el tamaño de sus archivos JavaScript y CSS.
- Complementos de JavaScript incorporados: Puede expandir la funcionalidad de UIkit a través de sus complementos de JavaScript, como pestañas, modales y controles deslizantes.
- Personalización: La disponibilidad de variables Sass y mixins brinda más espacio para la personalización. Por lo tanto, puede crear diseños únicos que coincidan con las necesidades de su aplicación.
- Herramientas de autocompletado de UIkit para su editor: Puede agregar complementos de UIkit o fragmentos de código a su editor de código favorito, como Código de Visual Studio, Texto sublime 3, o Atom, y obtenga un ayudante para generar clases de UIkit y marcado.
UIkit será una opción perfecta para los desarrolladores que buscan un diseño moderno y distinto. Autocompletar UIkit para su editor
HTML KickStart
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 componentes agradables que encontré:
Desplegable
Botones
Pestañas (centradas y con iconos)
Materialize
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 principalmente 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á que las columnas han cambiado de lugar, lo que quizás sea algo inalcanzable en CSS tradicional basado en Bootstrap.
Beneficios 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 gran alternativa a Bootstrap o para aquellos que buscan adoptar un marco de CSS Material con todas las funciones.
Para concluir
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á.
También puede leer cómo agregar Bootstrap a Angular.
