Comment pirater Bootstrap CSS pour de meilleurs sites Web

Bootstrap tient beaucoup de mains de développeurs full-stack lorsqu'il s'agit de créer des sites. Beaucoup d'entre nous ne savent pas utiliser Figma, ne savent pas ce qu'est un bon "design" et ne maîtrisent pas les propriétés CSS.

Mais putain sommes-nous bons pour créer un schéma de base de données, construire nos contrôleurs et nos modèles, gifler un thème de démarrage que nous avons trouvé sur Google dans nos vues et l'appeler un jour.

Le résultat final laisse généralement une personne satisfaite de l'efficacité avec laquelle elle a créé son site mais insatisfaite du résultat .

"Ça a l'air correct mais pas comme ce site génial d'un designer incroyable que j'ai vu récemment" -- développeur générique à pile complète.

Cet article est un didacticiel sur des conseils de conception pratiques pour obtenir satisfaction avec l'apparence de votre site sur le thème du bootstrap.

Installer

Je vais commencer avec ce thème bootstrap gratuit. Maintenant, améliorons-le !

Développez vos couleurs

Mettez à jour votre palette de couleurs

Bootstrap est livré avec une palette de couleurs complète que vous ne connaissiez peut-être pas. Profitez-en pour avoir une apparence différente des autres sites d'amorçage à l'emporte-pièce.

Pour avoir accès à ces couleurs, il suffit de les ajouter à notre fichier 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 si vous utilisez une configuration npm pour Bootstrap, mettez à jour votre fichier sass personnalisé qui est compilé.

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

Maintenant, nous pouvons mettre à jour ce bleu primaire brut de démarrage en une belle sarcelle douce pour notre bouton de démarrage. Nous voudrons également changer le texte du blanc au noir en supprimant la classe text-white dessus. C'est pour la lisibilité sur la couleur de fond plus claire.

Ajoutez un indice de couleur en haut de votre section héros

Nous pouvons ajouter une petite bordure en haut de la navigation pour donner un peu de vie à notre page avec la nouvelle couleur primaire sarcelle via border-primary .

Texte

Modifier les hauteurs de ligne en éléments communs

Un changement subtil que beaucoup de gens ne connaissent pas consiste à réduire la hauteur de vos lignes plus le texte est grand. Remplaçons les hauteurs de ligne par défaut pour les éléments HTML courants dans notre fichier CSS.

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

Espacement des lettres mis à jour

Les grands titres ont généralement trop d'espacement des lettres par défaut. Condensez l'espacement des lettres de vos balises h1 et h2 en mettant à jour notre fichier CSS comme nous l'avons fait pour la hauteur de ligne.

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

Texte de support de titre plus lourd

Nous pouvons maintenant renforcer le texte de support dans le héros. Le contraste entre elle et la balise H1 est à l'extrême. Nous allons supprimer la classe principale et lui attribuer une classe fs-5 . Cela vient avec un poids de police plus épais.

Sommaire

Où en sommes-nous jusqu'à présent...

Je voulais refactoriser ce thème dans 1 article de blog, mais c'est tout simplement trop de contenu. Je le divise en plusieurs articles.

Revenez la semaine prochaine pour l'article 2 ou abonnez-vous à ma newsletter sur thefreelancedev.com . Je mettrai à jour la section des fonctionnalités du thème et j'aurai quelques 🔥 conseils pour vous.

Je recommande également fortement de consulter Refactoring UI . Cela a complètement changé ma vision du design en tant que développeur.

✌️

Également publié ici .