paint-brush
Cómo hackear Bootstrap CSS para sitios web más atractivosby@thefullstackdev
1,052
1,052

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

Este artículo es un tutorial sobre cómo lograr la satisfacción con el aspecto de su sitio con tema de arranque. Actualice su paleta de colores con un nuevo color primario verde azulado y anule las alturas de línea predeterminadas para elementos HTML comunes en nuestro archivo CSS. Agregue un pequeño borde en la parte superior de la navegación para darle un poco más de vida a la página. Cambie el texto de blanco a negro eliminando la clase `text-white` del color de fondo más claro. Cambie las alturas de línea a elementos comunes con el texto más grande que reduce las alturas de línea.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Cómo hackear Bootstrap CSS para sitios web más atractivos
Wes | The Full Stack Dev HackerNoon profile picture

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.


Colores de refuerzo


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.

Cambio de color del botón Boostrap


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 .

Página superior con borde de Boostrap


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; } 


Boostrap altura de línea reducida

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; } 


Boostrap menos espacio entre letras para titulares


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.


Texto de apoyo de título más pesado


Resumen

Dónde estamos hasta ahora...


Actualizaciones de héroe Bootstrap


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í .