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 -- développeur générique à pile complète. "Ça a l'air correct mais pas comme ce site génial d'un designer incroyable que j'ai vu récemment" Cet article est un didacticiel sur pour obtenir satisfaction avec l'apparence de votre site sur le thème du bootstrap. des conseils de conception pratiques Installer Je vais commencer avec ce bootstrap gratuit. Maintenant, améliorons-le ! thème 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 dessus. C'est pour la lisibilité sur la couleur de fond plus claire. text-white 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 et lui attribuer une classe . Cela vient avec un poids de police plus épais. principale fs-5 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 . Je mettrai à jour la section des fonctionnalités du thème et j'aurai quelques 🔥 conseils pour vous. thefreelancedev.com Je recommande également fortement de consulter . Cela a complètement changé ma vision du design en tant que développeur. Refactoring UI ✌️ Également publié . ici

Comment pirater Bootstrap CSS pour de meilleurs sites Web

Trop long; Pour lire

Companies Mentioned

Wes | The Full Stack Dev

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...