Depuis quelques années, les systèmes et cadres de travail adaptatifs qui fonctionnent avec Sass se sont multipliés sur Internet presque de façon virale. On a l’impression aujourd’hui de trouver un système adaptatif simplement en se promenant au hasard sur le web; l’un d’eux se démarque néanmoins de façon constante : Susy.
Pourquoi tout ce bruit autour de Susy et de ses solutions de rechange? Avec autant de choix offerts, le choix peut sembler simple à faire et facile à distinguer des autres, mais il ne l’est pas. Pour garder le fil tout au long de l’article, je vais donc essayer de rester simple et de décortiquer les choses avec un seul but en tête : répondre à la question Quel genre de projet convient le mieux à Susy?
Allons-y. Nous passerons en revue les éléments suivants : définition, avantages et inconvénients, compatibilité et solutions de rechange.
UNE COMPARAISON INÉVITABLE QUI N’EN EST PAS UNE
Mon professeur de littérature m’a toujours dit qu’il était de mauvais goût de définir une chose par comparaison ou par ce qu’elle n’est pas. Dans ce cas précis, la comparaison avec Bootstrap est toutefois inévitable, vu sa popularité. La plupart des gens entendent « adaptatif » et voient Bootstrap dans leur tête. Réglons donc cette question tout de suite : Susy ne ressemble PAS du tout à Bootstrap.
Cela dit, Bootstrap est un cadre de travail de gabarits alors que Susy est un cadre de travail de grilles; permettez-moi de préciser un peu.
Cadre de travail de gabarits
D’un côté, Bootstrap est né au départ comme un gabarit, non adaptatif d’ailleurs; l’adaptativité est venue après. Sa grille prédéfinie peut être personnalisée jusqu’à un certain point et complétée par des extensions jQuery prêtes à l’emploi et des composants tout faits comme des carrousels, des accordéons, de la navigation et ainsi de suite, ce qui vous permet d’assembler un site web en un rien de temps.
Prototyper un site web avec Bootstrap est un jeu d’enfant, alors que faire exactement la même chose avec Susy (même s’il offre un point de départ) prendrait beaucoup plus de temps.
Avec Bootstrap, vous personnalisez (ou codez) les deux côtés : le HTML et le CSS. Ces deux codes sont ensuite associés ou appariés pour donner forme à la solution. Or, de ce point de vue, Bootstrap est difficile à entretenir. Si vous voulez changer la grille du site plus tard, vous devrez modifier les DEUX côtés, d’abord le HTML puis le CSS.
Cadre de travail de grilles
De l’autre côté, il y a Susy, qui vous fournit les outils pour bâtir un cadre de travail de grilles sur mesure qui correspond aux besoins de votre site web. La grille n’est PAS prédéfinie pour les débutants, ce qui ouvre la voie à ces designs asymétriques à la mode qu’il est impossible de créer avec les cadres de travail rigides traditionnels; Susy vous donne la souplesse et la liberté de jouer avec votre design.
Du côté du code, Susy laisse le HTML tranquille et la plus grande partie de la magie se passe dans le fichier Sass qui génère le CSS. Susy est donc fait pour évoluer avec un projet sur le long terme, ou pour le mettre à jour à tout moment. La facilité d’entretien est la cerise sur ce gâteau, puisque le HTML et le CSS ne sont pas appariés.
Encore une fois, Susy n’est qu’un cadre de travail de grilles et n’inclut aucun composant, même si des solutions de tiers commencent à apparaître, comme nous le verrons plus loin.
AVANTAGES ET INCONVÉNIENTS DE SUSY
Bon, passons en revue les principaux avantages et inconvénients de Susy comme cadre de travail de grilles pour un projet donné :
AVANTAGES
- Très souple
- Pas besoin d’ajouter des classes au balisage, ou très peu.
- Grilles faciles à entretenir et à étendre
- Excellents exemples, documentation et tutoriels
INCONVÉNIENTS
- N’a aucun composant préexistant
- N’est pas livré avec des points de rupture prédéfinis (vous devrez créer les vôtres, ce qui peut être bon ou mauvais selon votre échéance).
COMPATIBILITÉ
Susy assure la prise en charge des anciens navigateurs jusqu’à IE6 et IE7 (que personne ne devrait plus utiliser, je sais, mais la prise en charge est là), puisqu’il reconnaît toutes les fonctions Browser Support de Compass qui assurent une expérience uniforme d’un navigateur à l’autre; il vous permet aussi de produire uniquement le code moderne dans un fichier et uniquement les solutions de repli dans un autre fichier. Au cas où vous vous le demanderiez, Bootstrap assure une prise en charge limitée d’IE9 et très limitée d’IE8; je ne compare pas, je le mentionne.
SOLUTIONS DE RECHANGE
Comme je l’ai mentionné plus tôt dans l’article, il existe beaucoup de cadres de travail adaptatifs. Par ordre de popularité, ces deux-là sont les plus proches de Susy et fonctionnent tous les deux avec Sass :
- Bourbon Neat (Sass avec Bourbon ) : il repose entièrement sur les « mix-ins » de Sass et n’a pas besoin de Compass.
- Singularity (Sass avec Compass ) : certains disent qu’il vaut Susy, mais la documentation n’est pas très bonne.
La dernière version, Susy 2, est maintenant autonome, ce qui veut dire qu’elle ne dépend plus de Compass. Cela dit, si vous voulez continuer à utiliser certaines fonctions de productivité de Compass, ne le mettez pas de côté tout de suite. En fait, même si elles sont lentes, certaines fonctions de Compass comme les dimensions d’images, le générateur de sprites et les rythmes verticaux, entre autres, complètent le flux de travail de Susy de façon plutôt efficace.
Le fait que Susy 2 n’exige plus Compass permet encore de le compléter avec d’autres bibliothèques Sass comme Bourbon, qui possède des composants et des structures de base qui aident à prototyper et à façonner des sites web plus vite :
- Bitters, des styles, variables et structures de base pour les projets Bourbon
- Refills, des composants et des patrons
- Bourbon a même un cadre de travail de grilles semblable à Susy, comme mentionné plus haut, appelé Neat.
Cela dit, pourquoi ne pas simplement utiliser Neat au lieu de Susy? C’est une question de préférence personnelle, et beaucoup de gens l’utilisent. Neat est aussi populaire chez les développeurs front-end. Ce qui semble faire pencher la balance en faveur de Susy, c’est sa documentation très étendue, sa communauté et les sites web importants qui ont été bâtis avec lui.
Comme Susy n’est plus maintenant « que » du Sass, on peut utiliser tous ces outils en les réunissant dans un seul coffre à outils et avoir le meilleur des deux mondes.
Je ne laisse pas entendre que Susy traîne les pieds du côté des composants; c’est plutôt qu’il s’est d’abord renforcé sur les capacités de grille et qu’il semble maintenant avancer en emprunant à d’autres cadres de travail, comme Singularity, et en incluant des mises en page prédéfinies de Salsa et de Zen Grids. Susy pourrait donc nous surprendre à un moment donné avec des structures de base et des composants « officiels » dans une prochaine version, comme Bourbon l’a fait, ou peut-être que la communauté y contribuera au fil du temps. On verra.
UN DERNIER MOT SUR BOOTSTRAP
Ne vous méprenez pas, Bootstrap est un cadre de travail puissant et il est loin d’être disparu; je l’utilise moi-même quand les délais de livraison sont serrés, alors réfléchissez à deux fois avant de vous en éloigner. D’ailleurs, on peut vraiment utiliser Bootstrap avec Susy, comme le suggèrent certains auteurs, en profitant des composants de Bootstrap et de ses capacités de prototypage inégalées (jusqu’à maintenant du moins), puis en réajustant peu à peu la grille avec Susy.
Cela dit, si l’idée est de s’éloigner davantage des grilles standards et de l’empilement habituel, alors Susy convient parfaitement dès le départ, mais il faudra trouver nos propres extensions et composants et développer nos propres grilles et comportements. Cela prend effectivement plus de temps quand on part de zéro.
CONCLUSION
Enfin, pour répondre à la question de départ, les projets qui conviennent le mieux à Susy : avant tout, Susy convient mieux aux projets où vous visez à en faire plus du côté du design graphique. Si vous voulez vous faire bien voir du designer web pour plaire au client, Susy vous permet d’aller aussi loin que vous le voulez en design, sans retenue. Ensuite, comme votre site web bâti avec Susy s’entretient remarquablement bien, vous pouvez le redessiner entièrement à tout moment sans avoir à changer le HTML ni le contenu.
Je sais, cela semble trop beau pour être vrai, mais c’est le cas et cela vaut l’effort, du moment que vous (et le designer web) n’avez pas de contraintes de temps serrées. Cela dit, Susy n’est pas fait pour la vitesse, à moins que vos grilles asymétriques soient déjà esquissées et réglées.