L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment construire une échelle de type réactif avec Bootstrap –
Dans ce tutoriel, nous allons examiner en profondeur comment Bootstrap gère la typographie et comment nous pouvons modifier le code de deux manières différentes pour créer une échelle de type réactive. Ceci est souvent appelé "typographie responsive", dont le but est de garder votre typographie lisible sur toutes les tailles d'écran et éviter les titres géants sur les mobiles!
Comment Bootstrap établit la typographie par défaut
Pour comprendre la façon Bootstrap la typographie fonctionne, nous devons commencer à chercher dans les fichiers source SCSS pour explorer les paramètres d'installation et les paramètres par défaut.
Note: pour plus de clarté tout au long de ce tutoriel, j'ai commenté les styles du Bootstrap code qui n'est PAS associé à la typographie
html Element
Regardons d'abord les styles pour l'élément racine, trouvés dans _reboot.scss à la ligne 27:
html {
font-family: sans-serif;
hauteur de ligne: 1,15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
// -ms-overflow-style: barre de défilement;
// -webkit-tap-highlight-color: rgba (0, 0, 0, 0);
}
A partir de l'élément html il n'y a pas grand chose à signaler en termes de mise en place d'une échelle de type . Cependant, il convient de noter les déclarations - * - text-size-adjust: 100%; . Ceux-ci ont été utilisés pour empêcher certains navigateurs mobiles d'augmenter la taille de la police de leur propre chef.
Le corps Element
Voici les éléments du corps trouvés dans _reboot.scc sur la ligne 57 :
body {
// marge: 0; // 1
font-family: $ font-famille-base;
taille de police: $ font-size-base;
font-weight: $ font-weight-base;
line-height: $ line-hauteur-base;
couleur: $ body-color;
text-align: à gauche; // 3
// background-color: $ body-bg; // 2
}
Maintenant, nous pouvons commencer à voir quelques principes typographiques appliqués. En termes d'échelle de type, nous avons seulement besoin de nous préoccuper de font-size . Par défaut, ceci est défini via la variable $ font-size-base trouvée dans _variables.scss et est égale à 1rem . p Élément
Ces styles pour [élément p se trouvent dans _reboot.scss en ligne 109 :
p {
marge supérieure: 0;
margin-bottom: $ paragraph-margin-bottom;
}
Pas grand chose à signaler ici: la balise p hérite simplement de sa taille de police et comme on pouvait s'y attendre. [19659021] h1 à h6 Éléments
Ces styles sont situés dans _type.scss des lignes 16 à 21 :
h1,. h1 {font-size: $ h1-font-taille; }
h2, .h2 {font-taille: $ h2-font-size; }
h3, .h3 {font-taille: $ h3-font-size; }
h4, .h4 {font-taille: $ h4-font-size; }
h5, .h5 {font-taille: $ h5-font-size; }
h6, .h6 {font-taille: $ h6-font-size; }
Vous pouvez voir ici l'élément et la classe d'utilité font la taille de police à travers une variable. Les variables correspondantes se trouvent dans _variables.scss sur les lignes 246 à 251. En regardant ces variables, nous pouvons voir les tailles par défaut définies pour fonctionner dans toutes les largeurs de navigateur et de viewport:
$ h1-font -size: $ font-size-base * 2.5!
$ h2-font-size: $ font-taille-base * 2! default;
$ h3-font-size: $ font-taille-base * 1.75!
$ h4-font-size: $ font-taille-base * 1.5!
$ h5-font-size: $ font-taille-base * 1.25!
$ h6-font-size: $ font-taille-base! default;
En regardant une échelle de type pour ce qui précède, il est clair qu'une augmentation de .25rem est utilisée jusqu'au h1 qui reçoit un .5rem
Ces tailles peuvent être remplacées dans un fichier de variables personnalisées si vous utilisez un compilateur Sass, mais il vous reste une taille de police pour chaque en-tête de toutes les largeurs de navigateur et de fenêtre.
Les classes d'utilité .display-1 à .display-4
Le code suivant est en _type.scss des lignes 29 à 48 :
// Afficher les classes d'affichage
.display-1 {
taille de police: $ display1-size;
// font-weight: $ display1-weight;
// line-height: $ display-line-height;
}
.display-2 {
taille de police: $ display2-size;
// font-weight: $ display2-weight;
// line-height: $ display-line-height;
}
.display-3 {
taille de police: $ display3-size;
// font-weight: $ display3-weight;
// line-height: $ display-line-height;
}
.display-4 {
taille de police: $ display4-size;
// font-weight: $ display4-weight;
// line-height: $ display-line-height;
}
Comme pour les éléments d'en-tête, les tailles des classes d'utilitaire d'affichage sont définies comme variables dans le fichier _variables.scss des lignes 259 à 262. Encore une fois, si vous travaillez avec un compilateur Sass, vous pouvez redéfinir
Cela couvre la configuration de Bootstrap, et nous pouvons maintenant chercher des moyens de créer une échelle de type réactive qui est rapidement ajustable.
Créer l'échelle de type responsive
ce que je veux dire par un Échelle de type réactif . Par défaut, Bootstrap font-size pour les vedettes et ses classes display - * sont explicitement définies en utilisant les variables trouvées dans _variables.scss et les règles trouvées dans _type.scss .
Définir une taille de police pour les en-têtes sur toutes les tailles d'écran et de fenêtre peut conduire rapidement à des en-têtes surdimensionnés qui rendent l'expérience de l'utilisateur médiocre
, bien sûr, créer des requêtes de médias quand il s'agit de réduire les tailles de police qui semblent surdimensionnées, mais c'est à ce moment que vous perdez toute forme de hiérarchie d'échelle de type. Nous avons besoin de la hiérarchie des types pour suivre le flux du document
Dans le Responsive Type Scale et un moyen sympa de l'implémenter dans un projet Bootstrap! Si vous n'utilisez pas Sass ou SCSS, vous pouvez simplement mettre à jour le stylo que j'utilise pour des exemples et extraire le CSS compilé.
Un aperçu de l'échelle de type responsive pour Bootstrap
Nous allons mettre en place trois choses principales :
- une carte à l'échelle de type pour les changements rapides et les expériences
- une fonction pour vérifier si l'échelle est valide
- deux mixins pour nous permettre la flexibilité d'ajuster les tailles de police à un moment donné. Il convient de noter que, si votre conception n'inclut pas une échelle de type qui fonctionne sur un multiple commun, l'utilisation du
mixinne fonctionnera pas et vous devrez regarder le CSScompilédans le stylo pour obtenir le code dont vous avez besoin pour mettre à jour les tailles de police.La carte d'échelles de type réactif
Créer une carte de Sass d'échelles typographiques prédéfinies,
cléde la paire: valeurpaires. la carte des échelles, deux variables sont définies:$ heading-type-scale-baseet$ display-type-scale-base. Ces variables contiennent les échelles initiales utilisées dans une fenêtre ou un navigateur de largeur nulle et vers le haut. Ces variables acceptent une clé de la carte$-scalesou peuvent recevoir une valeur sans unité:$ type-scales: ( seconde-seconde: 1.067, seconde majeure: 1.125, tiers mineur: 1.200, troisième majeur: 1.250, parfait-quatrième: 1.333, augmenté-quatrième: 1.414, parfait-cinquième: 1.500, nombre d'or: 1.618 ) $ heading-type-scale-base: mineur-tiers; $ display-type-scale-base: mineur-tiers;Comment vérifier la valeur des échelles de type réactif
Il est important que vous ne soyez pas limité uniquement aux valeurs de la carte, car cela peut ne pas convenir à votre conception.
Pour cette raison, la fonction ci-dessous vérifiera si la valeur transmise au mixin est l'une des valeurs définies dans la
$ type-scalesou si elle doit être une valeur sans unité pour créer l'échelle de type:@function check-type- scale-value ($ scale) { // Vérifie $ scale par rapport aux valeurs dans $ type-scales. @if map-has-key (balises de type $, $ scale) { // Si la valeur de $ scale est définie dans // $ type-scales, retourne la valeur de $ scale. @return map-get (balises de type $, échelle de $); // Si la valeur de $ scale n'est pas définie dans le // $ type-échelles map, vérifie si la valeur est un nombre // et que le nombre est une valeur sans unité. } @else si type-of ($ scale) == nombre et sans unité ($ scale) { // Si la valeur de $ scale est un nombre sans unité, // retourne le nombre. @return $ scale; // Enfin, si la valeur passée à $ scale n'est pas // trouvé dans la carte des échelles de type $ ni un nombre sans unité, // lance une erreur Sass pour expliquer le problème. } @autre { // Lance une erreur Sass si la valeur $ scale est // ni trouvé dans la carte des balises $ type // un nombre sans unité. @error "Désolé,` # {$ scale} `n'est pas une valeur numérique sans unité ou une clé prédéfinie dans la mappe $. } }Ensuite, nous allons construire les mixins pour créer les tailles de police initiales.
Créer les tailles de police Heading et Display
J'ai d'abord écrit le
CSSpour obtenir une échelle de type responsive lorsque l'alpha La version de Bootstrap 4 était disponible. Mais depuis la publication de la version stable de la bibliothèque, j'ai réorganisé les choses pour utiliser la configuration par défautSCSSce qui rend pratique l'inclusion du code dans les projets Bootstrap.Le premier
mixinest utilisé pour créer les tailles de police d'en-tête deh6àh1:@mixin create-heading-type-scale ($ scale) { // Vérifie la valeur de l'échelle $ et stocke dans une variable // utilisé lors du calcul des tailles de police. $ l'en-tête-type-scale: check-type-scale-value ($ scale); // A partir de h6, multipliez chaque valeur précédente par l'échelle // pour obtenir la taille de police suivante $ font-size-h6: $ font-taille-base; $ font-size-h5: $ police-taille-h6 * $ l'en-tête-type-échelle; $ font-size-h4: $ police-taille-h5 * $ l'en-tête-type-échelle; $ font-size-h3: $ police-taille-h4 * $ l'en-tête-type-échelle; $ font-size-h2: $ police-taille-h3 * $ l'en-tête-type-échelle; $ font-size-h1: $ font-taille-h2 * $ l'en-tête-type-échelle; // $ font-size-display-base est rendu global pour permettre l'accès au // varibale dans le prochain mixin. $ font-size-display-base: $ police-taille-h1! global; // Ajoute les tailles de police créées aux éléments et aux classes h1, .h1 {font-taille: $ font-size-h1; } h2, .h2 {font-taille: $ font-size-h2; } h3, .h3 {font-taille: $ font-size-h3; } h4, .h4 {font-taille: $ font-size-h4; } h5, .h5 {font-taille: $ font-size-h5; } h6, .h6 {font-taille: $ font-size-h6; } }Ci-dessus, les tailles de police sont d'abord créées et stockées dans des variables à partir de
$ base-font-sizeet en multipliant chaque valeur précédente par la valeur d'échelle de type. Le même principe est appliqué ci-dessous, mais nous commençons à partir de$ font-size-display-base:@mixin create-display-type-échelle ($ scale) { // Stocker l'échelle de type par défaut dans une variable pour les calculs $ the-display-type-scale: check-type-échelle-valeur ($ scale); // Crée des variables pour référencer la taille de la police précédente $ font-size-display-4: $ font-taille-affichage-base + $ font-size-base; $ font-size-display-3: $ police-taille-affichage-4 * $ the-display-type-scale; $ font-size-display-2: $ font-size-display-3 * $ l'échelle de type d'affichage; $ font-size-display-1: $ police-taille-affichage-2 * $ the-display-type-scale; // Ajoute les tailles de police créées aux éléments et aux classes .display-4 {font-taille: $ font-size-display-4; } .display-3 {font-taille: $ font-size-display-3; } .display-2 {font-taille: $ font-size-display-2; } .display-1 {font-taille: $ font-size-display-1; } }Laisser tomber la racine
font-sizeJ'aime laisser tomber la racine
font-sizeà14pxpour les mobiles et travailler jusqu'à16pxpuis18px. Ci-dessous se trouve leSCSSpour ce faire en utilisant les tailles de point d'arrêt demdetlg:html { taille de police: 14px; @media (min-width: 768px) { taille de police: 16px; } @media (min-width: 992px) { taille de police: 18px; } }Wrapping It Up
Une fois que tout ce travail est fait, il s'agit d'inclure vos mixins et de choisir les gammes désirées!
// Créer les tailles de police des en-têtes @include create-heading-type-échelle ($ heading-type-scale-base); // Créer les tailles de police d'affichage @include create-display-type-échelle ($ display-type-scale-base); // Au point d'arrêt Bootstrap md, ajustez les tailles de police d'en-tête. @media (min-width: 768px) { @include create-heading-type-scale (mineur-tiers); }Comme vous pouvez le voir, vous pouvez inclure le mixin à n'importe quel point d'arrêt et changer complètement votre échelle de type. Chaque taille de police peut toujours être surchargée si nécessaire et tout semble bon.
L'échelle de type réactif Bootstrap en action
Vous pouvez voir l'échelle de type réactive Bootstrap en action dans ce stylo:
Voir le stylo Bootstrap 4 Type réactif Scale par SitePoint ( @SitePoint ) sur CodePen .
J'espère que ce tutoriel vous a donné un aperçu de la façon dont vous pouvez personnaliser Bootstrap pour travailler en vous fournissant une meilleure compréhension de la façon d'atteindre une échelle de type sensible en utilisant cette bibliothèque populaire.
Si vous avez les bases de Bootstrap à votre actif, mais que vous vous demandez comment faire passer vos compétences Bootstrap au niveau supérieur , jetez un coup d'oeil à notre cours Construire votre premier site Web avec Bootstrap 4 pour une introduction rapide et amusante à la puissance de Bootstrap.
Développeur Web avec une passion pour l'apprentissage du développement frontal, une légère dépendance à Bootstrap et un Utilisateur avide de WordPress. Quand je peux m'éloigner du code, j'aime passer du temps avec ma femme et mon jeune fils et me faufiler dans la ronde de golf.
Source link