Share
Le 19th Août 2015, Bootstrap 4 alpha a été rendu public, exactement quatre ans après la première annonce officielle de Bootstrap v1 (quelle coïncidence non?).
Woohoo! Twitter Bootstrap, un framework CSS / HTML open source de moi-même et de @fat, vient d'être mis en ligne: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo) 19 août 2011
Le framework front-end, toujours très populaire, a subi une métamorphose complète et, en tant que grand fan de Bootstrap, je suis très heureux de pouvoir mettre la main sur certaines des nouvelles fonctionnalités.!
La page d'accueil de BootstrapAprès environ un an de développement, 1 100 validations et 120 000 lignes de code ont été modifiées; il y a beaucoup de changements et de nouvelles fonctionnalités sur lesquelles nous pouvons baver. Pour vous éviter tous les problèmes liés à la consultation du journal des modifications, j'ai compilé une liste de fonctionnalités que j'ai trouvées intéressantes..
Commençons là où chaque framework commence, le module de réinitialisation. Le nouveau module de redémarrage de Bootstrap s’appuie sur le normaliser.css et déplace maintenant tous les sélecteurs d'éléments génériques et les styles de réinitialisation dans un seul fichier scss accessible.
Vous remarquerez également un truc astucieux, définissant la traditionnelle taille de la boîte: border-box au html élément, puis globalement à tous les éléments via l'héritage:
html box-sizing: border-box; *, *: before, *: after box-sizing: inherit;
Cela nous permet de mieux remplacer le paramètre (si nécessaire) sans augmenter la spécificité ou utiliser !important.
Nous remercions Jon Neal pour son idée originale et CSS-Tricks pour son aperçu détaillé de cette méthode..
Dans le souci de rationaliser le CSS, Bootstrap v4 alpha a abandonné la prise en charge d'IE8 et de nombreux remplissages entiers de CSS3. En prenant en charge IE9 +, il a pu intégrer certains modules CSS très appréciés. L’un d’eux est l’unité rem (root em), qui calcule la taille de la police par rapport à l’élément racine (html).
En poussant les unités rem plus loin, nous pouvons vraiment commencer à plonger dans une typographie sensible. Comme le dimensionnement de toutes les polices est basé sur notre élément racine, nous pouvons créer des requêtes multimédia pour modifier les tailles à différents points de rupture. Combinez cela avec les nouveaux mixins de point d'arrêt de la grille et le tour est joué!
Voici un exemple de modification de la taille de la police sur notre site Web sur de très petits appareils:
html taille de la police: 16px; // Crée une requête multimédia pour les très petits périphériques (0 - 34em) @include media-breakpoint-up (xs) html font-size: 18px;
Lisez la suite dans le guide complet de Kezz Bracey: Quand utiliser Em vs Rem.
Par défaut, Bootstrap v4 ne prend pas en charge Flexbox, mais utilise des méthodes plus traditionnelles de table flottante ou d'affichage. L'absence d'intégration standard de Flexbox facilite la prise en charge d'IE9 +. Toutefois, si vous êtes prêt à renoncer à cette prise en charge et à passer à IE10 +, vous pouvez activer Flexbox dans votre projet. Ceci est fait en changeant la variable booléenne dans le fichier _variables.scss; votre css compilé va maintenant inclure les styles Flexbox. La Flexbox est utilisée non seulement sur la grille, mais également sur divers autres éléments, notamment le nouveau composant de carte, les groupes d'entrée et les composants multimédia..
Examinons un exemple où Flexbox nous aide. Très souvent, j'aurai un ensemble de colonnes en ligne (comme illustré ci-dessous) où le contenu de l'une des colonnes étendra la hauteur bien au-delà des autres colonnes. Un dilemme classique des CSS. L'un des nombreux avantages de l'activation de Flexbox est que nous pouvons forcer les hauteurs de colonne à être égales. Aucun CSS supplémentaire n'est requis!
Sans Flexbox
Avec FlexboxOh, btw-Bootstrap 4 sera dans SCSS. Et si vous vous en souciez, v5 sera probablement dans PostCSS parce que merde sainte ça sonne bien.
- Mark Otto (@mdo) 23 avril 2015
SCSS a usurpé LESS comme préprocesseur CSS de choix pour Bootstrap v4. L'ensemble de la base de code CSS a été remanié en tant que SCSS, sans port officiel LESS au moment de la rédaction. Mark a expliqué certains de ses raisonnements dans un tweet:
Si vous voulez des raisons: plus de gens utilisent SCSS, libsass est dingue, la syntaxe est plus claire, et je suis fainéant et utilise SCSS chez GitHub..
- Mark Otto (@mdo) 23 avril 2015
Si vous êtes un grand fan de la version originale de LESS, Mark a demandé de l'aide pour créer et gérer le port LESS..
Bootstrap v4 a nettoyé ses composants avec la suppression du classique bien, panneau et la vignette Composants. A leur place un nouveau composant: les cartes!
Le nouveau composant de carte présente les aspects familiers des panneaux, tels que les titres, les en-têtes et les pieds de page, et les regroupe dans un conteneur de contenu ordonné et flexible..
Et il y a plus:
Vous pouvez définir un fond de carte avec une image et superposer le texte de la carte et tout autre contenu. Ceci est fait sans CSS supplémentaire en ajoutant l'élément suivant dans votre carte:
Ajout de la classe carte inverse définira la couleur de la police en blanc, ce qui vous permettra de définir un arrière-plan plus sombre si vous le souhaitez.
En parlant d’arrière-plans, les variantes de couleur traditionnelles peuvent également être appliquées à la carte et styliser l’arrière-plan en conséquence. Par exemple, carte-primaire définira la carte sur la couleur primaire, etc..
En plus de la grille standard avec gouttières, vous aurez également la possibilité de regrouper les cartes, de supprimer l'espacement, puis de régler chaque colonne à une hauteur uniforme. Par défaut, ceci est réalisé en utilisant affichage: table et disposition de la table: fixe, cependant, si vous avez activé Flexbox, il utilisera affichage: flex au lieu.
Le composant de carte est également livré avec une configuration de colonne de type maçonnerie qui permet aux cartes de s'empiler les unes sur les autres en fonction de l'espace vertical disponible. Cette option est non pris en charge dans IE9-il nécessite IE10 et plus!
Les versions précédentes de Bootstrap incluaient diverses classes appelées «classes utilitaires» pour permettre un réglage rapide et facile du contenu en dehors des styles spécifiques aux composants. En règle générale, cela a été limité à quelques changements assez basiques, tels que flottant (tirez à gauche, tirez à droite), Couleur (.texte-primaire etc), clearfix (.clearfix) et quelques autres.
Dans Bootstrap v4 alpha, nous avons accès à une foule de nouvelles classes d’utilitaires concernant le remplissage et les marges. Cette initiative, qui risque d’être controversée, permettra aux utilisateurs de Bootstrap v4 d’ajouter et d’aligner rapidement du contenu par incréments uniformes. Certains utilisateurs peuvent penser que les classes d’utilitaires sont très proches des styles en ligne. Cependant, elles permettent de styliser rapidement et uniformément un composant sans créer de sélecteur spécifique..
Les classes d'utilitaires de marge et de remplissage sont créées en multiples d'une valeur d'espacement uniforme. par exemple:
// $ spacer est une variable sass égale à 1rem ou 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 représente margin sur unell côtés. Il y a des classes pour des côtés individuels, des axes, des tailles différentes (comme indiqué par -0, -Maryland et -lg) et pour le rembourrage.
Voici un aperçu des autres classes:
// Applique un rembourrage standard à tous les côtés .p-a padding: $ spacer! Important; // Applique un remplissage standard au sommet .p-t padding-top: $ spacer-y! Important; // Appliquer le remplissage standard à droite .p-r padding-right: $ spacer-x! Important; // Applique un remplissage standard au bas .p-b padding-bottom: $ spacer-y! Important; // Applique un remplissage standard à gauche .p-l padding-left: $ spacer-x! Important; // Applique un remplissage standard à l'axe x (droite et gauche) .p-x padding-right: $ spacer-x! Important; padding-left: $ spacer-x! important; // Applique un remplissage standard à l'axe des y (haut et bas) .p-y padding-top: $ spacer-y! Important; padding-bottom: $ spacer-y! important;
L'idée ici est de réduire le nombre de classes personnalisées hautement spécifiques créées pour déplacer le contenu, au lieu de les transformer en une méthode d'alignement de contenu uniforme et cohérente..
J'ai discuté avec Mark Otto (co-créateur de Bootstrap chez @mdo) sur leur chaîne publique Slack et discuté de l'utilisation de ces classes. Il a déclaré:
«Nous en avons eu besoin et avons souvent remplacé les valeurs par défaut de nombreux composants. La marge et le remplissage semblent être les propriétés les plus couramment remplacées (avec la couleur et la police). "- Mark Otto
Il existe littéralement des centaines de nouvelles fonctionnalités et de mises à jour de la base de code existante, trop nombreuses pour être décrites en détail. Donc, voici quelques autres qui n'ont pas fait ma liste principale, mais méritent tout de même d'être mentionnés.
La documentation de Bootstrap v4 a été actualisée. Il existe une structure légèrement différente dans laquelle les caractéristiques sont décomposées en disposition, contenu et Composants. Ce que j'aime bien dans la nouvelle documentation, c'est que chaque composant a sa propre page, ce qui facilite les liens et le redimensionnement de la page pour tester sa réactivité..
Bootstrap 4 a un nouveau niveau de grille pour cibler les plus petits périphériques (moins de 480px), ce point d'arrêt a pris le nom de la classe la plus petite précédente (.col-xs-XX). Ce faisant, tous les niveaux de la grille ont gravi un cran, créant ainsi un nouveau plus grand niveau appelé .col-xl-XX pour la lg précédente.
Comme indiqué dans la conversion vers rem et em, l'équipe Bootstrap a ajouté de nouveaux mixins pour créer rapidement des points d'arrêt autour des points d'arrêt existants. Ils peuvent être utilisés avec la syntaxe suivante:
// Crée une requête multimédia: @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) … // Crée une requête multimédia: @media (max-width) @include media-breakpoint-down (xs) … @include média point d'arrêt-down (sm) … @include média point d'arrêt-down (md) … @include média point d'arrêt-down (lg) … @include média point d'arrêt -down (xl) …
Les glyphiques ont été retirés de la construction; La documentation de Bootstrap 4 inclura éventuellement des instructions sur la manière d’inclure des packs d’icônes tiers, tels que Font Awesome et Octicons..
Tous les plugins JavaScript ont été réécrits dans ES6 pour tirer parti des dernières spécifications. Vous remarquerez peut-être que certains plugins ont été supprimés (comme le plugin affix) au fur et à mesure qu'ils continuent à réécrire et à construire la nouvelle bibliothèque..
Voilà donc ma liste de certaines des nouvelles fonctionnalités intéressantes ajoutées à Bootstrap 4 alpha. Si vous souhaitez consulter l'intégralité du journal des modifications jusqu'à présent, jetez un œil à la demande de tir du git de @ mdo pour Bootstrap 4..
Je suis sûr qu'il y aura encore beaucoup de changements à venir au fur et à mesure que l'équipe résoudra tous les problèmes. Leur plan de développement comprend les étapes suivantes
Il n'y a pas de mot sur le moment où ils seront publiés, un peu comme les versions précédentes, il reviendra à quand la bibliothèque sera prête. Entre-temps, lancez-le et aidez-le à suivre les problèmes et à fournir des commentaires généraux via son système de suivi des bogues.!
Accentsconagua
