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 -- desarrollador genérico de pila completa. "Se ve bien, pero no como ese sitio increíble de un diseñador increíble que vi recientemente" Este artículo es un tutorial sobre para lograr la satisfacción con el aspecto de su sitio con tema de arranque. consejos prácticos de diseño Configuración Voy a comenzar con este de arranque gratuito. ¡Ahora vamos a mejorarlo! tema 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 en él. Esto es para mejorar la legibilidad en el color de fondo más claro. text-white 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 y le daremos una clase . Esto viene con un peso de fuente más grueso. principal fs-5 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 . Estaré actualizando la sección de características del tema y tendré algunos consejos para ti. thefreelancedev.com También recomiendo encarecidamente consultar de usuario. Cambió por completo mi perspectiva sobre el diseño como desarrollador. Refactorización de la interfaz ✌️ También publicado . aquí

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

Demasiado Largo; Para Leer

Companies Mentioned

Wes | The Full Stack Dev

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...