À quoi s'attendre avec Bootstrap 4

Au cours des dernières années, Bootstrap est devenu très populaire. Il y a de fortes chances que vous ayez rencontré ou créé des thèmes WordPress qui intègrent des éléments Bootstrap. Il est passé d'un cadre pré-réactif de base à un cadre réactif robuste, riche en fonctionnalités et moderne. Bootstrap 3 existe depuis un certain temps, il est donc passionnant de découvrir ce qui va suivre dans Bootstrap 4.

État de Bootstrap 4

Bootstrap 4 est actuellement en préparation et n'est pas encore prêt à être utilisé en production. Il est actuellement en version alpha. C'est une bonne occasion de prévisualiser et de se familiariser avec la façon dont cela vous aidera dans vos projets futurs.

La documentation de Bootstrap 4 n'est pas encore complète, l'expérimentation est donc un bon moyen de tester certaines des nouvelles fonctionnalités. Une fois qu'il sera officiellement disponible pour une utilisation en production, vous serez bien au courant de toutes les grandes nouvelles améliorations.

Conçu pour les navigateurs modernes

Au fur et à mesure que nous progressons sur le Web, il devient de plus en plus difficile de prendre en charge les anciens navigateurs tout en utilisant les derniers développements Web. Que ce soit ou non de la musique à vos oreilles, nous pouvons tous convenir que de meilleures techniques CSS3 sont simplifiées lorsque vous travaillez avec des navigateurs modernes. Bootstrap 4 pourrait bien être le moyen idéal de faire une rupture nette avec les anciens navigateurs. Avec cette mise à jour, la prise en charge d'Internet Explorer 8 est complètement abandonnée. Gardez à l'esprit que le framework prend toujours en charge Internet Explorer 9 et prend toujours en charge CSS3 sans trop de problèmes.

Réinitialisation améliorée

Vous vous êtes probablement habitué à Normalize.css, qui est une excellente option de réinitialisation. Il existe une nouvelle réinitialisation améliorée avec des éléments spécifiques à Bootstrap ajoutés, appelés reboot.css. Les spécificités de Bootstrap sont des choses comme le dimensionnement de la boîte : bordure, rems comme unité de mesure, styles de lien et styles de formulaire. C'est un excellent mélange entre Normalize.css et les besoins spécifiques de Bootstrap, vous êtes donc sûr de partir du bon pied.

TOUPET

Dans les jours précédents de Bootstrap, il semblait que MOINS était préféré. Avec les changements de l'industrie et les préférences des concepteurs qui penchent vers SASS, c'est ce qui est actuellement en faveur. Si vous vous souvenez de la version 3, c'est à ce moment-là que l'option SASS est devenue disponible avec l'option de port. Pour le moment, il n'y a pas de support prévu pour LESS.

Personnalisations

Bootstrap 4 facilite la création de vos conceptions personnalisées, le tout de manière organisée. Toutes les options variables sont regroupées dans un seul fichier. SASS peut être compilé facilement et il n'y a pas besoin d'une feuille de style séparée, comme c'était le cas dans le passé.

Il existe de nombreuses nouvelles options de personnalisation dans Bootstrap 4. Vous pouvez voir l'état actuel ici. Il évoluera très probablement un peu au fur et à mesure que les détails continueront d'être publiés.

Gardez à l'esprit qu'il s'agit de personnalisations faciles à configurer au début :

• Valeurs par défaut du corps
• Variables de couleur
• Boîte flexible
• Options de conception CSS3 comme les transitions, les coins arrondis, les ombres portées, etc.
• Mesures d'espacement
• Styles de lien
• Points d'arrêt de la grille
• Conteneurs de grille
• Colonnes de la grille
• Dimensionnement de la typographie
• Composants
• les tables
• Suite!

Flexbox quelqu'un?

Flexbox a certainement gagné en popularité et nous verrons de plus en plus de concepteurs de sites Web l'utiliser. C'est un excellent outil à utiliser car il offre des options de mise en page simples et flexibles avec un style CSS. Si vous aimez la facilité d'alignement vertical du contenu dans un élément parent, réorganisez le contenu sur les appareils et les résolutions d'écran à l'aide de requêtes multimédias, et appréciez un moyen simple d'avoir des colonnes de hauteur égale dans votre grille, Flexbox est une excellente solution. .

Avant de vous lancer et de convertir tous vos projets, il y a une chose importante à mentionner. Même si la prise en charge des navigateurs a considérablement augmenté, Internet Explorer 9 ne prend toujours pas en charge Flexbox. En ce qui concerne la facilité d'utilisation, Bootstrap 4 facilite l'utilisation de Flexbox si vous n'avez pas besoin du support IE9. Essentiellement, tout ce que vous avez à faire est de trouver le fichier _variables.scss et de changer le $enable-flex de false à true. Si vous connaissez SASS, c'est une chose rapide à faire.

Mises à jour de la grille

Si vous êtes un fan de Bootstrap depuis longtemps, vous êtes probablement un expert du fonctionnement du système de grille, ainsi que de la convention de dénomination. Avec Bootstrap 4, la syntaxe reste la même mais il y a une différence avec les mesures utilisées. Le système de grille est désormais basé sur les « rems ». Il s'agit d'un ajustement si vous avez l'habitude de pixelliser des conceptions parfaites, car maintenant les choses seront plus fluides.

Lorsque nous nous séparons des pixels auxquels nous sommes devenus si habitués, examinons l'exemple de quelque chose de commun comme .container et .row. Le conteneur a maintenant une largeur maximale définie en rems. Une ligne a une marge négative gauche et droite par défaut de -.9375rem , tandis que les colonnes ont un rembourrage gauche et droit par défaut de 0.9375rem . Comme vous vous en souvenez peut-être, ces valeurs étaient auparavant de 15px dans Bootstrap 3. Ces nouvelles valeurs rem sont comparables à cela.

Requêtes média améliorées

Les requêtes multimédias dans les versions précédentes de Bootstrap étaient un peu générales et parfois des requêtes personnalisées devaient être créées. Voici à quoi ils ressemblaient :

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Désormais, une approche plus mobile peut être adoptée avec ces requêtes multimédia mises à jour :

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Si vous souhaitez quelque chose de différent, les points d'arrêt sont configurables dans SASS si vous souhaitez choisir le vôtre.

Cartes en remplacement

Vous êtes familier avec les panneaux, les puits et les vignettes ? Les cartes sont désormais les plus récentes et les meilleures, et offrent d'excellentes options de style. Un exemple est les groupes de cartes. Même si la quantité de texte varie, les cartes ont la même hauteur, sans dépendre de JavaScript. Cela fonctionne à la fois avec Flexbox et le mode grille par défaut. Lors de l'utilisation de Flexbox, les cartes sont créées à l'aide des propriétés Flexbox. La grille par défaut utilise une astuce CSS pour éviter le besoin de JavaScript. Le conteneur utilise display: table; et chaque "carte" est display: table-cell; en lui donnant les propriétés de la table - c'est de là que vient la hauteur de colonne égale.

Typographie

Rappelez-vous comment la grille utilise maintenant les rems ? Eh bien, il est logique que la typographie fasse cela aussi ! Lorsque vous y réfléchissez, rappelez-vous que toutes les tailles de police sont relatives à l'élément racine, la balise HTML. Lorsque vous modifiez la taille de la police (ou tout autre style) sur la balise HTML, vous pouvez facilement styliser et mettre à l'échelle les styles tout au long de votre projet.

Supposons que votre élément HTML est stylé avec un font-size: 16px . Disons que vous vouliez que vos balises h5 aient cette taille, vous déclareriez une taille de police de 1rem.

h5 {
font-size: 1rem;
}

Maintenant, il peut y avoir des calculs à faire pour aller de l'avant. Si vous vouliez que vos balises h1 soient de 40 px, voici comment le déterminer :

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

Vous ne vous sentez pas encore remué ? Vous pouvez toujours utiliser des pixels et des ems pour le dimensionnement si vous le souhaitez.

Plus de styles de titre

Les titres sont parfaits pour établir une hiérarchie. Mais que se passe-t-il si vous voulez quelque chose de plus important qu'un h1, h2, h3, etc. ? Eh bien, la bonne nouvelle est que vous pouvez ajouter une classe d'en-tête d'affichage à un en-tête standard qui l'agrandit. Cela ressemblerait à quelque chose comme :

<h1 class="display-4">Heading Display 4</h1>

Un display-4 est plus grand qu'un display-2 .

Taille de fichier plus petite

Bootstrap 4 a une empreinte plus petite. Il est en fait environ 30 % plus petit que la dernière version, Bootstrap 3. Il était auparavant d'environ 123 Ko et est maintenant d'environ 88 Ko. C'est génial qu'il soit plus petit et qu'il ait toujours les mêmes fonctionnalités.

Gardez à l'esprit qu'il est possible d'utiliser uniquement les parties de Bootstrap dont vous avez besoin, ce qui réduit encore la taille des fichiers.

Plus de Glyphicons ?

Les glyphicons étaient largement utilisés dans les versions précédentes de Bootstrap, il est donc triste de les voir disparaître. Ne vous inquiétez pas, ce n'est pas la fin des icônes Web. À sa place, FontAwesome devrait tout aussi bien vous servir. Vous pouvez également consulter les Octigons de Github pour de superbes options d'icônes.

Passer à Bootstrap 4

Bien qu'il soit actuellement en version alpha, il n'y a aucune raison pour que vous ne puissiez pas l'utiliser dans un environnement de test. Le code source est disponible dans une branche v4-dev sur GitHub. Au fur et à mesure que vous expérimentez et voyez tout ce qui nécessite votre attention, il existe une demande d'extraction de développement et de suivi qui inclut des notes sur les modifications et toute autre nouvelle amélioration.

Les choses sont en alpha, et il y aura éventuellement des versions bêta une fois que les fonctionnalités et fonctionnalités seront prêtes à être testées. Après la bêta, deux versions candidates seront utilisées pour tester les choses en production. Quand tout se passera bien, la version finale sera prête !

Nous venons de gratter la surface ici et la conversation Bootstrap 4 vient de commencer. C'est excitant de voir ce que l'avenir nous réserve et je suis impatient de le voir sortir de l'alpha. Assurez-vous de garder un œil sur les mises à jour et téléchargez-en une copie pour tester les nouveaux composants Bootstrap 4.