LES FRAMEWORKS CSS ou comment se passer de bootstrap.

Écrit par Kévin Dhoury Nb de vues 13897 Commentaires 5

Il n'y a pas que Bootstrap dans la vie !

Lecture Zen
framawork-css-alternative-bootstrap Mis à jour le 6 décembre 2020

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 Aout 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”
  • 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

framework-gumby
Gumby Framework

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 pluspart 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 de cette époque révolue.

Foundation

foundation
Zurb 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 et 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.

A la suite de cette présentation, de nombreux frameworks se sont basés sur ce design en respectant plus ou moins les règles proposées par la firme de mountain view.

Material Design Light

material design light
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

materializecss
materializecss

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

knacss
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

fox_css
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 ;) ).

Skeleton

skeleton
Skeleton

Un fichier css de 400 lignes prenant en charge une grille responsive, des boutons, des formulaires, des liens, des listes et j’en passe.

Siimple

siimple
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 tirant son nom de l’agence brésilienne qui le propulse 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, 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 ou à présenter vos coups de cœur sur d’autres solutions.

Noter cet article

Cet article est noté 4.2/5 par 13 de nos lecteurs

Discussion

  1. Bon article.
    Moi perso je suis devenu accro à uiKit (dans sa version 3) essentiellement parce qu’il utilise les flexbox et qu’il est le framework pris en charge par Gantry (template creator pour Joomla). Tout comme Foundation, il n’est pas axé sur le design et c’est pourquoi quand je bosse sur un projet Laravel par exemple, je le couple en scss avec Semantic ui pour son coté design.
    Mais j’ai commencé à utilisé uiKit dans sa version 2 parce qu’il intégrait de base un datepicker, malheuresement absent dans la v3

  2. Merci pour cette article très intéressant !
    Pour bootstrap, si l’on veut une interface plus élégante, on doit quand même mettre la main à la pâte.
    En ce moment je m’intéresse à Semantic ui, qu’en pensez vous de ce dernier ?
    Votre site utilise-t-il un framework CSS ?

    PS : je suis devenu accro à votre site ;) j’y trouve de très bons conseils ! Bonne continuation !

  3. Peut-on qualifier Foundation de bootstrap-killer, alors que Zurb Foundation est l’un des précursseur et que Bootstrap est le fruit du débauchage d’un employé de Zurb par Twitter ?

    Personnelement dans la pratique Foundation a tué et enterré Bootstrap depuis la V4. Alors aujourd’hui n’en parlons pas.

    Mais si je devais conseiller j’encouragerais à utiliser les meilleurs composants foundation (ex la grille,une pure merveille) avec d’autres composants d’autres Framework front et des composants perso, le tout en SASS pour maintenir le tout

    Bonne journée a tous !

    Mantis

    1. Foundation dans la boite à outil surpasse de loin Bootstrap ca c’est clair ! Mais en réalité Bootstrap a pris le marché lool . Le jour ou vous voyez un site fait avec Foundation appelez moi j’en serais ravi :)

      Les boites utilisent Boostrap car il a une image de fiabilité a toute épreuve ! Et surtout une simplicité dans les classes CSS même si ce n’est pas le top sémantiquement parlant… Ce qui n’est pas le point fort de Foundation a mon sens… C’est pour cela que Sass est inétressant dans ce cas.

      “j’encouragerais à utiliser les meilleurs composants foundation (ex la grille,une pure merveille) avec d’autres composants d’autres Framework front”

      Perso ou est l’intérêt d’utiliser un autre framework front la ?

      Bonne journée

  4. Merci pour cet article très intéressant.
    A quand un article sur les concurrents de font awesome ?

Laisser un commentaire

J'ai fini de lire

Aller en haut Contactez-nous X