Cómo hackear Bootstrap CSS para sitios web más atractivos

Bootstrap tiene muchas manos de desarrolladores full-stack cuando se trata de crear sitios. Muchos de nosotros no sabemos cómo usar Figma, no estamos seguros de qué es un buen "diseño" y no dominamos las propiedades de CSS.

Pero maldita sea, somos buenos para preparar el esquema de la base de datos, construir nuestros controladores y modelos, abofetear un tema de arranque que encontramos en Google en nuestras vistas y darlo por terminado.

El resultado final generalmente deja a una persona satisfecha con la eficiencia con la que creó su sitio pero insatisfecha con el resultado .

"Se ve bien, pero no como ese sitio increíble de un diseñador increíble que vi recientemente" -- desarrollador genérico de pila completa.

Este artículo es un tutorial sobre consejos prácticos de diseño para lograr la satisfacción con el aspecto de su sitio con tema de arranque.

Configuración

Voy a comenzar con este tema de arranque gratuito. ¡Ahora vamos a mejorarlo!

Expande tus colores

Actualiza tu paleta de colores

Bootstrap viene con una paleta de colores completa que quizás no conozcas. Aprovéchalo para lucir diferente a los otros sitios de arranque estándar.

Para obtener acceso a estos colores, solo necesitamos agregarlos a nuestro archivo de arranque scss/_variables.scss .

 $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;

O si está utilizando una configuración npm para Bootstrap, actualice su archivo sass personalizado que se compila.

 @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap";

Ahora podemos actualizar ese azul primario bruto de arranque a un bonito verde azulado suave para nuestro botón de inicio. También querremos cambiar el texto de blanco a negro eliminando la clase text-white en él. Esto es para mejorar la legibilidad en el color de fondo más claro.

Agregue un toque de color en la parte superior de su sección de héroe

Podemos agregar un pequeño borde en la parte superior de la navegación para darle un poco más de vida a nuestra página con el nuevo color primario verde azulado a través de border-primary .

Texto

Cambiar alturas de línea a elementos comunes

Un cambio sutil que mucha gente no conoce es la reducción de la altura de las líneas cuanto más grande es el texto. Anulemos las alturas de línea predeterminadas para elementos HTML comunes en nuestro archivo CSS.

 h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; } 

Espaciado entre letras actualizado

Los títulos grandes generalmente tienen demasiado espacio entre letras de forma predeterminada. Condense el espacio entre letras de sus etiquetas h1 y h2 actualizando nuestro archivo CSS como lo hicimos para la altura de línea.

 h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; } 

Texto de apoyo de título más pesado

Ahora podemos reforzar el texto de apoyo en el héroe. El contraste entre este y la etiqueta H1 es extremo. Eliminaremos la clase principal y le daremos una clase fs-5 . Esto viene con un peso de fuente más grueso.

Resumen

Dónde estamos hasta ahora...

Quería refactorizar este tema en 1 publicación de blog, pero es demasiado contenido. Lo estoy dividiendo en varios artículos.

Vuelva a consultar la próxima semana el artículo 2 o suscríbase a mi boletín en thefreelancedev.com . Estaré actualizando la sección de características del tema y tendré algunos consejos para ti.

También recomiendo encarecidamente consultar Refactorización de la interfaz de usuario. Cambió por completo mi perspectiva sobre el diseño como desarrollador.

✌️

También publicado aquí .