Bootstrap CSS sigue siendo la mierda, pero podemos mejorarlo

Bootstrap es un marco CSS increíble para aquellos que luchan con el diseño, css o necesitan construir algo rápidamente.

Pero los componentes de Bootstrap que copia y pega de la documentación tienen fallas.

¡Estos defectos están frenando tus diseños!

Aquí hay 5 consejos de diseño para corregir esos defectos y mejorar Bootstrap.

1) Llamar la atención sobre las alertas

Agregue bordes oscuros e íconos svg para llamar la atención del usuario.

 <div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert"> <p class="fs-6 mb-0 d-flex align-items-center"> <!-- https://heroicons.com/ light-bul--> <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" /> </svg> <span>A simple primary alert—check it out!</span> </p> </div>

2) Las tablas no tienen que coincidir con su base de datos

Las tablas HTML no tienen que ser una copia de la estructura de su base de datos. Elimine los nombres de las columnas, los identificadores y combine los campos cuando tenga sentido.

 <div class="border-0 shadow bg-white rounded"> <h3 class="fs-5 px-3 pt-3">Users</h3> <div class="px-2 pt-2"> <table class="table table-borderless fs-6"> <tbody> <tr> <td>Mark Otto</td> <td class="text-end text-muted">@mdo</td> </tr> <tr class="bg-light rounded-4"> <td>Jacob Thornton</td> <td class="text-end text-muted">@fat</td> </tr> <tr> <td>Larry the Bird</td> <td class="text-end text-muted">@twitter</td> </tr> </tbody> </table> </div> <div class="p-3 bg-light rounded d-flex justify-content-end"> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> <buttons class="btn btn-primary">View</buttons> </div> </div>

3) Los botones secundarios no necesitan color de fondo

Dar a las acciones primarias un color de fondo y a las acciones secundarias ningún color de fondo establecerá una jerarquía de importancia.

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title">Special offer</h5> <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p> <buttons class="btn btn-primary">View Details</buttons> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> </div> </div>

4) ¡Deja de etiquetar todo!

A los desarrolladores les encanta etiquetar valores. ¡Para! Muestre información como si fuera una oración en un libro, no un par de valores clave.

 <div class="card border-0 shadow"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h1 class="card-title fs-5">Rocky Mount, MI</h1> <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2> <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p> </div> </div>

5) Sombras > Bordes

Los bordes de las tarjetas a menudo se sienten torpes. Las sombras enfatizan los elementos y le dan profundidad a la página, haciendo que el elemento se sienta más cercano al usuario.

 <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title fs-5">Collaborate</h5> <p class="card-text"> Share your work with hundreds of like minded individuals around the world! </p> </div> </div>

¿Más consejos de diseño de Bootstrap?

Si disfrutaste esto, considera ver mi nuevo proyecto: Better Bootstrap

Allí encontrará un libro gratuito que contiene más consejos de diseño de Bootstrap como los de este artículo.

✌️ - Wes