Como hackear CSS Bootstrap para sites com melhor aparência

O Bootstrap tem muitas mãos de desenvolvedores full-stack quando se trata de criar sites. Muitos de nós não sabemos como usar o Figma, não temos certeza do que é um bom “design” e não somos proficientes com as propriedades CSS.

Mas caramba, somos bons em criar esquemas de banco de dados, construir nossos controladores e modelos, aplicar um tema de bootstrap que encontramos no Google em nossas visualizações e encerrar o dia.

O resultado final geralmente deixa uma pessoa satisfeita com a eficiência com que criou seu site, mas insatisfeita com o resultado .

“Parece bom, mas não é como aquele site incrível de um designer incrível que vi recentemente” -- desenvolvedor full-stack genérico.

Este artigo é um tutorial sobre dicas de design acionáveis para obter satisfação com a aparência do seu site com tema bootstrap.

Configurar

Vou começar com este tema bootstrap gratuito. Agora vamos melhorá-lo!

Expanda suas cores

Atualize sua paleta de cores

O Bootstrap vem com toda uma paleta de cores que você talvez não conheça. Aproveite-o para parecer diferente dos outros sites de bootstrap padronizados.

Para ter acesso a essas cores, basta adicioná-las ao nosso arquivo de bootstrap scss/_variables.scss .

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

Ou se você estiver usando uma configuração npm para Bootstrap, atualize seu arquivo sass personalizado que é compilado.

 @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";

Agora podemos atualizar esse azul primário bruto de bootstrap para um belo azul-petróleo para nosso botão de início. Também queremos alterar o texto de branco para preto removendo a classe text-white nele. Isso é para facilitar a leitura na cor de fundo mais clara.

Adicione uma dica de cor ao topo da seção do seu herói

Podemos adicionar uma pequena borda na parte superior da navegação para trazer um pouco mais de vida à nossa página com a nova cor primária azul-petróleo via border-primary .

Texto

Alterar alturas de linha para elementos comuns

Uma mudança sutil que muita gente não conhece é reduzir a altura das linhas quanto maior o texto. Vamos substituir as alturas de linha padrão para elementos HTML comuns em nosso arquivo CSS.

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

Espaçamento entre letras atualizado

Títulos grandes geralmente têm muito espaçamento entre letras por padrão. Condense o espaçamento entre letras de suas tags h1 e h2 atualizando nosso arquivo CSS como fizemos para a altura da linha.

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

Texto de suporte de título mais pesado

Agora podemos reforçar o texto de apoio no herói. O contraste entre ela e a tag H1 é ao extremo. Vamos remover a classe principal e dar a ela uma classe fs-5 . Isso vem com um peso de fonte mais grosso.

Resumo

Onde estamos até agora...

Eu queria refatorar esse tema em 1 postagem no blog, mas é muito conteúdo. Estou dividindo em vários artigos.

Volte na próxima semana para o artigo 2 ou assine meu boletim informativo em thefreelancedev.com . Estarei atualizando a seção de recursos do tema e darei algumas 🔥 dicas para você.

Eu também recomendo verificar Refactoring UI . Isso mudou completamente minha perspectiva sobre design como desenvolvedor.

✌️

Publicado também aqui .