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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps