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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Una breve introducción a la teoría del cerebro de Boltzmann

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Una breve introducción a la teoría del cerebro de Boltzmann

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps