Quand tu as fait tes premiers pas en HTML et CSS (si tu n’as pas lu mon article sur l’apprentissage du HTML/CSS avec une jolie mindmap pour te guider, c’est par-là), tu as vite envie de t’améliorer en intégration, ajouter une nouvelle compétence sur ton profil LinkedIn et pourquoi pas ajouter ton code sur un site comme Codepen.io
C’est normal ! 😁
Une fois que tu as les bases, on t’a probablement parlé de « framework CSS« , une espèce de boite à outils qui te permet de travailler plus vite, ne pas réinventer la roue, écrire du code CSS plus propre, donner un style plus alléchant pour l’interface utilisateur, créer des sites web responsive…
Avant de faire cet article, j’ai ouvert un sondage sur Twitter pour savoir quels frameworks mes abonnés utilisaient.
Les réponses apportées ci-dessous m’ont confortées dans la direction de mon article. 👇
C’est parti pour un petit tour d’horizon sur les framework CSS les plus connus et mon avis personnel sur leur utilisation au fil du temps… 🤩
Bootstrap – Le plus connu de tous
C’est l’un des framework CSS les plus populaires. C’est probablement le framework que tu as appris durant ta formation, je me trompe ?
Créé par les équipes de Twitter en 2011. La dernière version 4 est sortie en 2018 avec son lot de nouveautés et supporte désormais SASS et LESS.
Sa popularité fait qu’il dispose d’un ensemble de ressources pour les développeurs front-end : templates de site, thèmes Bootstrap et une collection de composants UI.
La courbe d’évolution est progressive, ce qui fait que son apprentissage est relativement facile. Il y a tellement de ressources que l’on arrive assez rapidement à un résultat et c’est exactement ce que l’on cherche au début. 👍
En ce qui me concerne, je l’ai trouvé parfois un peu lourd de classes et de JavaScript pour mon utilisation. Alors c’est vrai qu’une fois mes armes faites, je l’ai progressivement délaissé pour d’autres frameworks… #SorryNotSorry
Bulma – Le deuxième framework que j’ai adoré
Après avoir fait le tour de Bootstrap, j’avais envie de toucher à autre chose…
C’est en découvrant les superbes ressources HTML et CSS (HTML Reference et CSS Reference) de Jeremy Thomas, le créateur de Bulma, que j’ai eu envie de mettre les mains dans son framework.
Ce n’est certes pas le plus léger des frameworks mais sa simplicité et surtout son design m’ont convaincu.
Basé sur Flexbox et Grid, l’utilisation de Bulma est on ne peut plus simple. Petite exemple :
Exemple :
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>
Quel bonheur ! Les colonnes s’adaptent à leur conteneur grâce à la magie du Flexbox… et avec une syntaxe simple à souhait !
Toutes les classes de type « modifiers » commencent par « is- » ou « has- » ce qui rend l’écriture du CSS plus fluide.
Par exemple, pour indiquer qu’un bouton est de taille petite, on ajoutera la classe is-small
et si tu veux indiquer que c’est un bouton de type informationnel, on ajoutera la classe is-info
Toutes les classes peuvent être combinées pour créer des composants simples de façon intuitive.
Je le trouve très beginner-friendly et c’est peut-être pour ça que je l’ai autant adoré.
Pure.css – La simplicité à l’état pur
Créée en 2014 par Yahoo, Pure.css a été construit sur la base de Normalize.css
Léger, responsive, « pur » d’où son nom et pensé mobile-first . Il n’y a pas de librairies JavaScript associée à Pure, on est sur petit framework (moins de 3.8KB minifié) concentré en un système de fonctionnalités bien documentées. Pas de fioriture !
C’est l’un de mes framework de choix sur lequel je construis mon composants CSS.
Je le vois comme un subtil mix entre un reset CSS et une boite à outil minimaliste sur laquelle on intègre de nouveaux composants faits-maison.
Un véritable couteau suisse pour commencer un projet from scratch !
Et bien d’autres framework CSS, encore et encore…
J’aurais pu continuer de parler des frameworks sans m’arrêter mais je me suis tenue à ceux que j’utilise et ai utilisé. Concernant les autres frameworks qui méritent aussi le détour, je pense à :
- Tailwind.css (le prochain que je souhaite apprendre sur ma liste 🤓)
- Foundation
- Semantic UI
- Materialize
- UI Kit
- Base
Ok, mais j’apprends quel framework, au final ?
Avant de penser à apprendre un framework CSS, je préfère insister sur un point :
Apprend le CSS vanilla en premier ! ⚠️
Alors finalement, qu’importe le framework, on a tous notre petit préféré, celui que l’on installe sans l’ombre d’un doute, celui que l’on maitrise par coeur, celui que l’on souhaite apprendre depuis des mois…
L’important, c’est de comprendre ce dont on a besoin pour choisir le framework qui correspond le mieux à notre projet.
Est-ce bien utile de sortir l’artillerie lourde en composants et en JavaScript pour un petit projet qui nécessite juste du responsive et quelques classes utilitaires ?
Pas vraiment, non ! 😅 Au fil des expériences, tu te posera la question de savoir si l’utilité même d’un framework est valable dans ton projet. 🤯
Au début de notre apprentissage du développement front-end, c’est vrai que c’est impossible de se faire une idée d’une nouvelle notion…
Alors mon conseil pour la route, c’est de commencer par un framework (Bootstrap étant le plus connu, pourquoi pas ?) et d’apprendre à s’en servir pas à pas dans des projets.
Ouvrir la documentation, commencer par les principes de base pour aller progressivement sur des concepts plus complexes jusqu’à ce que tu en aies envie de voir autre chose.
Et enfin, de recommencer la même opération avec un autre framework.
C’est easy sur le papier ! Alors fonce ouvrir la documentation d’un framework et amuse toi ! 💪
Et toi, sinon, c’est quoi ton framework que tu adores 😍 et celui que tu ne supportes plus 🥴 ?
6 réponses
Moi mon chouchou en ce moment c’est Materialize <3
Il faudrait que je le teste sur un projet !
Moi je pars dans tous les sens : Materialize, boostrap, KNACSS , pure.csss …..
Et c’est très bien aussi !
Parfois il faut passer par cet étape de « phase de test » pour trouver le framework qui nous convient et qu’on adore. Une préférence dans ceux que tu as cité ?
Merci pour cet article !
Personnellement j’aime beaucoup et utilise Bulma / Pure (en fonction du projet et de mes envies)
– un étudiant O’Clock.
Ça reste des valeurs sûres ! TailwindCSS a la cote également, tu devrais y jeter un coup d’oeil, par curiosité.
Merci pour ton commentaire Romain.