Les nouvelles fonctionnalités de Bootstrap 4 Alpha

French (Français) translation by Mireia Porta Arnau (you can also view the original English article)

Le 19 août 2015, Bootstrap 4 a été dévoilé au public, exactement quatre ans après leur première annonce officielle du bootstrap v1 (drôle de coincidence, n'est-ce pas ?)

Suuper ! Twitter Bootstrap, une structure de code source libre CSS/HTML crée par @fat et par moi vient d'être mise en ligne: http://t.co/3OOsQ5T #kaboom
— Mark Otto (@mdo) 19 août 2011

La très populaire structure "front-end" a été complètement remaniée et, en tant que grand amateur du Bootstrap, je suis tout excité à l'idée de mettre la main sur quelques-unes des nouvelles fonctionnalités !

bootstrap homepage — La page d'accueil du Bootstrap

Après un an de développement, 1 100 validations ("commits") et 120 000 lignes de code modifiées, il y a de quoi s'extasier avec la quantité de changements et de nouvelles fonctionnalités. Afin de vous éviter la peine de passer au peigne fin le journal des modifications, je vous ai compilé une liste des fonctionnalités que j’ai trouvé intéressantes.

Nouveau module de réinitialisation appelé « Reboot »

Commençons par où toute structure de code démarre, le module de réinitialisation. Le nouveau module de réinitialisation de Bootstrap se base sur le traditionnel normalize.css et déplace maintenant tous les sélecteurs génériques d’éléments et styles de réinitialisation dans un unique fichier accessible scss.

Vous remarquerez également un truc astucieux : la classique box-sizing: border-box est appliquée à l’élément html, puis globalement à tous les éléments par héritage :

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Cela nous permet de mieux redéfinir les paramètres (si nécessaire) sans avoir à spécifier davantage ou à utiliser !important.

Le crédit en revient à Jon Neal quant à l’idée originale et au site CSS-Tricks pour une présentation approfondie de cette méthode.

REMS et la règle des Ems!

En vue d'aider à simplifier le CSS, Bootstrap v4 alpha a cessé de prendre en charge IE8 et a éliminé un grand nombre de « polyfills CSS3. En prenant en charge IE9+, il a pu adopter certains des modules CSS les plus appréciés. L’un d'entre eux est l’unité de rem (em racine), qui calcule la taille de la police par rapport à l’élément racine (html).

En travaillant sur les unités de rem, nous pouvons vraiment commencer à explorer la typographie adaptée aux différents écrans (réactivité). On peut créer des « medias queries » pour modifier les tailles de police à différents points d'arrêt, car toutes les tailles sont basées sur l'élément racine. Combinez cela avec les nouveaux mixins des points d’arrêt de la grille et le tour est joué !

Voici un exemple sur comment la taille de la police est modifiée sur notre site Web lorsqu'il est lu sur des appareils plus petits :

html{
    font-size:16px;
}

// Creates a media query for extra small devices (0 - 34em)
@include media-breakpoint-up(xs) {
  html{
		font-size:18px;
	}
}

Vous en saurez plus en lisant Guide complet : quand utiliser Em vs Rem par Kezz Bracey.

Opter pour Flexbox

Le Bootstrap 4 original ne prend pas en charge Flexbox, il utilise plutôt des méthodes plus classiques des objets flottants ou de tableau d’affichage. Le manque d’intégration du Flexbox standard contribue à prendre en charge IE9 +. Cependant, si vous êtes prêt à vous passer de ce dernier et de sa prise en charge et demarrer à partir de IE10 +, vous pouvez activer Flexbox dans l’ensemble de votre projet. Pour ce faire, on change la variable booléenne dans le fichier _variables.scss ; le css compilé intégrera maintenant des styles Flexbox. Flexbox est utilisé non seulement sur la grille, mais aussi pour plusieurs autres éléments, y compris les composants tels la nouvelle carte, les groupes de saisie et les objets médias.

Par exemple

Examinons un exemple où Flexbox nous aide. Bien souvent, je vais avoir une série de colonnes (comme illustré ci-dessous) où le contenu d'une des colonnes dépasse largement celui des autres. Un dilemme classique de la CSS. Un des nombreux avantages d'activer Flexbox est que nous pouvons forcer les colonnes à garder la même hauteur. Pas besoin d'ajouter du CSS !

SCSS le dernier cri

Oh, à propos, Bootstrap 4 sera en SCSS. Et si vous voulez savoir, v5 sera probablement en PostCSS parce que merde alors, ça fait vraiment cool.
— Mark Otto (@mdo) 23 avril 2015

SCSS a été choisi comme préprocesseur CSS pour usurper LESS dans Bootstrap v4. La base de code CSS a été remaniée en entier en tant que SCSS, sans portée de LESS au moment de rédiger ces lignes. Mark en a expliqué un peu son raisonnement dans un tweet :

Si vous voulez des motifs : SCSS est plus utilisé, LibSass est super rapide, sa syntaxe plus claire, et je suis paresseux et utilise SCSS à GitHub.
— Mark Otto (@mdo) 23 avril 2015

Si vous êtes un grand passionné du langage original LESS, Mark a demandé de l’aide pour créer et maintenir la portée de LESS.

Cartes, l’élément UI unifié

Bootstrap v4 fait le ménage de ses composants en supprimant les classiques well, panel et thumbnail. À leur place, un nouveau component: les cartes !

Le nouveau composant carte a des éléments qui ressemblent aux panneaux, tels que des titres, des en-têtes et pieds de page qu'il déploie dans un conteneur fluide et ordonné.

Et encore :

Arrière-plans et des superpositions d’image

On peut définir une image comme arrière-plan de la carte et y superposer le texte et d'autres contenus. Il suffit d'ajouter l’élément suivant dans votre carte, sans CSS supplémentaire :

1	<img class="card-img" data-src="image.jpg" alt="Card image">

En ajoutant la classe card-inverse, la couleur de la police devient blanche, ce qui vous permet de définir un fond plus sombre si vous le désirez.

En parlant d'arrière-plans, on peut également appliquer les variantes de couleur traditionnelles à la carte et définir le style de l’arrière-plan en conséquence. Par exemple, card-primary appliquera la couleur primaire à la carte, et ainsi de suite.

Cartes groupées

Outre la grille standard avec gouttières, vous aurez également l’option de grouper les cartes, éliminer l’espacement entre elles, puis unifier l'hauteur des colonnes. Par défaut, on l'obtient avec display: table et table-layout: fixed ; cependant, si Flexbox est activé, il faut plutôt utiliser display: flex.

Grille de style maçonnerie

Le composant carte peut également se configurer avec des colonnes de maçonnerie où les cartes s’empilent étroitement en fonction de l’espace vertical disponible. Cette option n’est pas prise en charge dans IE9 — elle requiert IE10 et plus !

Encore des classes d'utilitaires ?!

Les versions précédentes du Bootstrap ont intégré plusieurs classes appelées « classes d’utilitaires » pour permettre un réglage rapide et facile du contenu en dehors des styles spécifiques aux composants. En général, cela se limitait à certaines modifications de base, comme élément flottant (pull-left, pull-right), la couleur (.text-primary etc.), clearfix (.clearfix) entre autres.

Dans le Bootstrap v4 alpha, nous avons accès à toute une série de nouvelles classes d’utilitaire concernant le padding et les marges. Ce pas qui risque d'être controversé permettra aux utilisateurs de Bootstrap v4 de décaler et aligner rapidement du contenu à des incréments uniformes. Il se peut que certains utilisateurs aient l'impression que les classes d'utilitaires ne sont qu'à deux doigts des styles sur une seule ligne, mais au fait elles offrent la possibilité d'appliquer rapidement et uniformément un style à un composant sans créer un sélecteur spécifique pour ce faire.

Les classes d'utilitaires margin et padding sont créés en multiples d’une valeur uniforme d’espacement. Par exemple :

// $spacer is a sass variable that equals 1rem or 16px

.m-a-0 { margin: 0 !important; }
.m-a { margin: $spacer !important; }
.m-a-md { margin:  ($spacer * 1.5) !important; }
.m-a-lg { margin:   ($spacer * 3) !important; }

Ici, .m-a est synonyme de marge sur tous les côtés (margin all). Il existe des classes pour des côtés ou des axes individuels, pour de différentes tailles (comme indiqué par -0, -md et -lg) et pour le padding.

Voici un aperçu de quelques-unes des autres classes :

// Apply standard padding to all sides
.p-a { padding:        $spacer !important; }

// Apply standard padding to the top
.p-t { padding-top:    $spacer-y !important; }

// Apply standard padding to the right
.p-r { padding-right:  $spacer-x !important; }

// Apply standard padding to the bottom
.p-b { padding-bottom: $spacer-y !important; }

// Apply standard padding to the left
.p-l { padding-left:   $spacer-x !important; }

// Apply standard padding to the x axis (right and left)
.p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }

// Apply standard padding to the y axis (top and bottom)
.p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }

Il s'agit ici d'aligner le contenu d'une façon uniforme et cohérente afin de réduire la quantité de classes personnalisées spécifiques que l'on serait obligé de créer pour le déplacer.

J’ai chatté avec Mark Otto (@mdo co-créateur du Bootstrap) sur leur chaîne publique Slack et en discutant de l’utilité de ces classes, il a dit :

« On a découvert qu'on en avait besoin car on se retrouvait souvant à remplacer les valeurs par défaut de nombreux composants. Les marges et les padding semblent être les propriétés que l'on remplace le plus couramment (avec la couleur et les polices). » -Mark Otto

Autres fonctionalités dignes de mention

Il y a carrément des centaines de nouvelles fonctionnalités et mises à jour du code de base existant, trop nombreuses pour rentrer dans le détail. Donc en voici deux autres qui n’étaient pas de mes prioritaires, mais qu'il convient quand même de mentionner.

Nouvelle Documentation

La documentation de Bootstrap v4 a été mise à jour. La structure varie légèrement puisqu'elle comprend trois parties : mise en page, contenu et composants. Ce qui me plait assez de la nouvelle documentation, c’est que chaque composant a sa propre page facile à relier et a redimensionner pour en tester la réactivité.

Nouveau niveau de grille

Bootstrap 4 a un nouveau niveau de grille pour cibler des appareils plus petits (inférieurs à 480 px de largeur), ce point d’arrêt a pris le nom de la classe précédente la plus petite (.col-xs-XX). Ainsi tous les niveaux de la grille montent un degré, créant ainsi un nouveau palier plus grand appelé .col-xl-XX pour le lg précédent.

Comme mentionné dans la conversion à rem et em, l’équipe de Bootstrap a ajouté de nouveaux mixins pour créer rapidement des points d’arrêt autour de ceux qui existent déjà. Ils s'emploient avec la syntaxe suivante :

// Creates a media query: @media (min-width)
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Creates a media query: @media (max-width)
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }

Plus d’icônes

Les glyphicones ont été éliminées de la structure ; la documentation Bootstrap 4 comprendra tôt ou tard des instructions sur la façon d’intégrer des paquets d’icônes tiers comme Font Awesome et Octicons.

Réécriture de JavaScript

On a réécrit tous les plugins JavaScript en ES6 pour profiter des dernières spécifications. Vous remarquerez que certains plugins ont été supprimés (comme le plugin affixe) à mesure qu'ils continuent de réécrire et de développer la nouvelle bibliothèque.

Et après ?

Voilà donc ma liste de quelques fonctionnalités ajoutées au Bootstrap 4 alpha. Si vous souhaitez consulter le journal complet des modifications faites jusqu'à présent, rendez- vous à la demande de tirage git de @mdo pour Bootstrap 4.

Je suis sûr qu’il y aura un tas de changements à venir à mesure que l’équipe travaille sur tous les bugs. Leur plan de développement inclut les étapes suivantes :

quelques nouvelles versions alpha supplémentaires afin de régler des questions soulevées par la communauté ;
deux versions bêta une fois les fonctionnalitées ont été parachevées ;
deux versions candidates (RCs) pour s’assurer que tout est fin prêt pour le sprint final.

L'heure actuelle de sa sortie demeure inconnue ; tout comme la structure précédente, elle verra le jour lorsque la bibliothèque sera prête. Dans l’intervalle, continuez d'utiliser bootstrap pour les aider à dépister les problèmes et n'hésitez pas à leur faire part de vos commentaires par le biais de leur traqueur de bugs (bug tracker) !