Étiquettes : ressources, webdesign

Bootstrap 4 débarque! Côté nouveautés: des changements techniques importants pour toujours plus de flexibilité. Zoom sur nos 5 améliorations coups de cœur!

On ne présente plus Bootstrap, le framework chouchou des développeurs adeptes du « mobile first ». Pour son 4ème anniversaire, l’équipe des créateurs a annoncé la sortie de la version 4. Déjà disponible en version alpha, elle propose quelques changements majeurs dans sa construction et ses comportements. Zoom sur nos 5 améliorations coups de cœur.

1. Un look toujours plus minimaliste

Petit lifting graphique, discret mais appréciable, pour cette version 4. Toujours plus minimaliste et flat. À l’image des nouveaux style de boutons en « outline »: particulièrement élégants et jouant sur le principe de simplicité/fonctionnalité.

2. Des cards 100% flexibles et de même hauteur

Les cards débarquent sous Bootstrap 4. Définies comme des conteneurs flexibles et extensibles, ces cards ont vocation à remplacer les panels et thumbnails. Elles comprennent des options pour les header et footer, prennent en charge une grande variété de contenus et de couleurs de fond contextuelles ainsi que de puissantes options d’affichage. Même si les contenus des cards sont de tailles différentes, leur hauteur est naturellement harmonisée (sans JavaScript). Le conteneur utilise, pour ce faire, la fonction « display: table » et chaque card est définie en « display: table-cell » pour un traitement sous forme de tableau.

[pullquote]Si Bootstrap 4 signe l’arrivée de quelques nouvelles composantes sympas et intéressantes, le gros du changement se passe sous le capot. [/pullquote]

3. Une compilation CSS encore plus simple via SASS

Si Bootstrap 4 signe l’arrivée de quelques nouvelles composantes sympas et intéressantes, le gros du changement se passe sous le capot. Une des principales nouveautés techniques de la version 4 de Bootstrap est le changement de langage au niveau du code source CSS et du système de compilation. Bye bye LESS CSS, bonjour SASS. Ou plus précisément sa version évoluée SCSS (avec une syntaxe similaire à une écriture CSS classique), toujours plus simple et plus pratique à l’utilisation.

4. Des unités de mesure ultra responsive avec les REM

Bootstrap 4 revoit également son rapport fonctionnel au système de grille. Toujours plus orienté « mobile first », le framework change d’unité de mesure pour l’application de ses règles responsive et autres padding et margin. Bootstrap 4 passe au REM (comprenez, « root EM »): une unité de mesure définie en fonction de la balise qui l’utilise directement et non de la balise parente comme le fait le EM. En clair, le recours au REM permet de ne définir qu’une seule taille de police sur l’élément HTML dans le CSS puis de composer toutes les tailles REM en valeurs relatives (pourcentage).

5. Une grille encore plus flexible avec flexbox

Dans le même esprit de flexibilité et d’adaptabilité à tous les supports, Bootstrap 4 recourt à présent au système de flexbox: un système de grille dynamique qui s’adapte parfaitement en fonction de la taille de l’écran. Ce système utilise la disposition CSS « display: flex » afin de donner au conteneur « flex » la possibilité d’élargir son ou ses composants pour remplir l’espace libre disponible, ou de les diminuer le cas échéant pour éviter tout débordement.

Le petit plus!

Cerise sur le gâteau, l’équipe de Bootstrap vient également d’ouvrir un tout nouveau service « Official Bootstrap Themes » et initie ainsi la vente de thèmes complets sous Bootstrap. Prix moyen: 99$ quand-même.

Alors, on la fait cette mise à jour? La version alpha est disponible via v4-alpha.getbootstrap.com.

---