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 -- desenvolvedor full-stack genérico. “Parece bom, mas não é como aquele site incrível de um designer incrível que vi recentemente” Este artigo é um tutorial sobre para obter satisfação com a aparência do seu site com tema bootstrap. dicas de design acionáveis Configurar Vou começar com este bootstrap gratuito. Agora vamos melhorá-lo! tema 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 nele. Isso é para facilitar a leitura na cor de fundo mais clara. text-white 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 e dar a ela uma classe . Isso vem com um peso de fonte mais grosso. principal fs-5 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 . Estarei atualizando a seção de recursos do tema e darei algumas 🔥 dicas para você. thefreelancedev.com Eu também recomendo verificar . Isso mudou completamente minha perspectiva sobre design como desenvolvedor. Refactoring UI ✌️ Publicado também . aqui

Como hackear CSS Bootstrap para sites com melhor aparência

Muito longo; Para ler

Companies Mentioned

Wes | The Full Stack Dev

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...