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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Modelo Bitcoin UTXO, alimentando um ecossistema único

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Modelo Bitcoin UTXO, alimentando um ecossistema único

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps