LES FRAMEWORKS CSS ou comment se passer de bootstrap…
Il n'y a pas que Bootstrap dans la vie !
Connu de tous, le framework CSS créé par deux petits gars de chez twitter, bootstrap, a su, en seulement quelques mois après son apparition en Août 2011, s’imposer comme LA référence du genre.
Bien qu’il reste à ce jour le plus utilisé et souvent le plus conseillé lorsque l’on débute dans le domaine du web, il est loin d’être le seul et unique framework front-end présentant de sérieux atouts pour simplifier nos mises en pages css.
Trois catégories de frameworks css
La quantité impressionnante de frameworks aujourd’hui disponibles sur la toile étant, j’ai décidé de vous présenter une sélection personnelle répartie en 3 catégories :
- les concurrents directs à bootstrap,
- les « material design »,
- et les minimalistes.
Je vous inviterai également à proposer ceux que vous utilisez ou tout simplement que vous souhaiteriez conseiller.
LES BOOTSTRAP KILLER
Ce que j’appelle Bootstrap killer ici, sont les frameworks css proposant des services assez proches de leur concurrent en permettant de faire face à (quasiment) toutes les situations grâce à la mise en place d’une feuille de styles complète et de nombreux plugins javascript directement intégrés ou développés par la communauté.
Cet atout en fait également leur principal défaut à savoir leur poids assez conséquent qui ne conviendra du coup pas forcément pour les plus petits sites. Parmi ces concurrents directs à bootstrap nous retrouvons essentiellement deux grands noms :
Gumby
Véritable usine à gaz, Gumby est servi accompagné de tout ce qu’il faut pour vous aider à réaliser l’apparence de votre site. Comme la plupart des autres frameworks css, il est basé sur une grille flexible divisée en 12 colonnes.
Le principal défaut, à mes yeux, est qu’il commence à dater un peu depuis sa dernière mise à jour en Mai 2015. Ses boutons « pretty style » avec dégradés sont les témoins d’une époque révolue.
Foundation
LE véritable concurrent de Bootstrap ! Il représente, pour moi, sa meilleure alternative possible. Le seul défaut (et encore) contrairement à son homologue est qu’il n’est développé qu’avec SASS et sans LESS.
LES GOOGLE STYLE
Présenté par Google lors de la conférence Google I/O le 25 Juin 2014, le material design est très vite devenu une excellente alternative au flat design. Bien que de nombreuses personnes le considère comme une simple copie de ce dernier façon google, il est dans les faits bien plus étoffé et réglementé afin d’offrir une meilleure expérience utilisateur.
À la suite de cette présentation, de nombreux frameworks se sont basés sur ce design en respectant + ou – les règles proposées par la firme de mountain view.
Material Design Light
Je ne pourrais commencer cette sélection sans parler du framework créé par l’équipe de développement travaillant dans l’entreprise même où cette tendance fut créée.
Bien que, sans surprise, il suive parfaitement les règles de design imposées par le material design basées sur ses fameuses cards, je lui préfère son concurrent Materialize.
Materialize
Pour moi comme pour beaucoup, Materialize est sans conteste LE framework à utiliser lorsque l’on souhaite réaliser un site/une app Material Design.
Bien qu’il ne soit encore qu’en phase d’alpha, il intègre déjà de nombreuses évolutions, des règles de bases proposées par google, que l’on retrouve fréquemment dans les créations présentes sur materialup (l’une des références pour les ressources liées au material design).
Je pourrais vous en présenter d’autres tellement leur nombre est élevé mais je ne pense pas qu’il y ait grand intérêt à cela étant donné qu’à eux seuls, ces deux frameworks vous permettrons de réaliser les différents types de site basés sur le material design.
Si vous voulez vous contenter de l’essentiel sans fioritures, partez sur MDL (Material design light). Tandis que Materialize vous offrira un peu plus de libertés et de diversité aux niveaux des différents effets de survol et autre.
Autre point important, méfiez vous de certains frameworks qui se disent material design alors qu’ils proposent qu’un flat design différent. Ou pire, qu’ils se basent sur certaines règles déconseillées par Google.
LES MINIMALISTES
Tous ces beaux frameworks bien pratiques ont tous un défaut en commun, c’est leur poids !
Nous n’avons pas non plus tous envie que notre site ressemble à tel ou tel autre site ce qui est malheureusement souvent le cas avec la plupart des frameworks css (avec l’habitude, on reconnaît très facilement un site réalisé à l’ai de bootstrap).
Pour tous ceux là, il existe une solution, les frameworks dit minimalistes qui ne proposent qu’une feuille CSS avec généralement une grille responsive en 12 parties et un reset ou son alternative que je vous conseille fortement : normalize.css qui vous permettra de partir sur de bonnes bases.
Knacss
Je commence tout de suite par celui que je préfère et qui de plus a été créé par Raphaël Goetter. Vous ne voyez pas qui c’est ? Si je vous dis alsacreations ça vous parle déjà plus ? Et bien Raphaël est également le fondateur de ce site référence.
Mise à jour du 06/12/2020 : Knacss ne répond plus.
Fox css
Bien que je n’ai pas encore eu l’occasion de le tester, j’ai décidé de le faire apparaître dans cette sélection car il est basé sur Knacss (et aussi parce qu’il a été réalisé par un Français [Cocorico]).
Skeleton
Un fichier css de 400 lignes prenant en charge :
- une grille responsive,
- des boutons, des formulaires, des liens,
- ou encore des listes.
Siimple
5Kb pour un css responsive simple et efficace développé sous sass. Tout est dit !
En bonus,
Je voulais vous présenter ce framework sur lequel je suis tombé par hasard en faisant mes recherches pour la rédaction de cet article.
Locaweb Style tire son nom de l’agence brésilienne qui le propulse. C’est un framework css spécialisé dans la conception de dashboards. Si certains d’entre vous ont déjà eu l’occasion de s’en servir, il serait intéressant d’avoir vos différents retours.
Pour conclure sur les frameworks css
Vous aurez remarqué qu’il existe bien des alternatives à bootstrap et pour chaque utilisation. Et je ne vous ai présenté ici qu’une infime partie des très nombreux frameworks disponible sur la toile.
Retenez juste ceci : Il n’y a pas une solution miracle qui vous permettra de réaliser tous les types de projets auxquels vous pourriez être confrontés et je rajouterai même que l’utilisation d’un framework front end (ou css) est loin d’être une nécessité … mais cela est un autre débat.
Surtout n’hésitez pas à commenter vos propres expériences sur ces frameworks ! Voire à présenter vos coups de cœur sur d’autres solutions.