Je. Déteste. Coder. En. CSS.

Pour ceux qui se demandent : mais… le CSS, c’est quoi ? Eh bien, si vous permettez une allégorie, disons que la construite d’un site web est une route. Vous écrivez le contenu de votre site web ? Vous faites environ cent mètres, en prenant votre temps, en regardant le paysage sur les côtés. Vous dessinez rapidement sur papier, GIMP ou Scribus à quoi le site web de vos rêves devrait ressembler ? Vous êtes en train de courir sur la route, vous faites fi des obstacles, des rochers et des branches, vous filez comme le vent. Vous commencez à coder en CSS cet incroyable design ? Vous vous prenez UN. ENORME. MUR. Dans votre face.

Et après que vous vous soyez remis.e de ce choc frontal, vous essayerez de le contourner, seulement pour découvrir des pics acérés qui vous donneront le tetanos à coup sûr. Escalader le mur ? N’y pensez même pas ! Vous ne trouverez que des barbelés électrifiés. Et si vous êtes un petit malin et que vous décidez de creuser en dessous du mur… Pauvre fou ! C’est un balrog que vous rencontrerez.

Bref. Je déteste le CSS. Maiiiiis j’ai découvert un super outil qui pourrait vraiment changer ma vision des choses !

Introducing… GrapesJS !!

Présentation de GrapeJS

GrapesJS ? C’est un peu l’aigle qui vous transporte jusqu’au Mont du Destin pour que vous n’ayez pas à faire toute la route de la Comté jusqu’au Mordor.

C’est une application web vous permettant de créer le squelette de votre si web de façon très simple : vous glissez-déposez les blocs que vous voulez utiliser, vous pouvez les réorganiser, changer leurs propriétés… et voir à quoi ressemblerait votre page depuis un grand téléphone, un petit… pour vérifier que vos contenu reste formaté de façon convenable.

Je vous invite à tester leur démo qui montre le genre de choses que l’on peut construire avec. N’hésitez pas à jouer avec pour vous faire une idée plus précise de l’outil !

Personnellement, je m’en suis servie pour mettre à jour mon template de présentation d’épisodes pour qu’il soit “responsive”, c’est à dire qu’il s’adapte à la taille de votre écran, et voici le résultat, le tout réalisé en environ 5 minutes top chrono !

Capture d'écran du template de création d'épisode selon plusieurs tailles d'écran

Pour une traumatisée du CSS, je trouve ça tout de même extrêmement satisfaisant cette histoire :)

Pourquoi c’est bien ?

Outre le fait que, selon moi, le gain de temps est ENORME, je trouve que GrapeJS très intéressant pour tout un tas de raisons :

  • c’est open source, c’est gratuit, il y a une démo en ligne et on peut égaler auto héberger un instance chez soi.
  • cela rend la création de site web “à la main” plus facile et plus accessible, avec une facilité d’utilisation similaire à des services comme Wix, par exemple, à la différence que là vous restez maître de votre site et de ses données
  • On peut importer du code déjà existant dans l’outil.

Pourquoi ça pourrait être bof, mais que c’est bien quand même ?

Certains me diront alors :

“Oui, mais Tamica c’est n’importe quoi cette histoire, c’est pas du vrai code, avec tout ça t’apprendras jamais à bien coder.”

A cela je répondrais… En effet, si votre but c’est d’apprendre à coder en HTML/CSS, ce n’est pas avec GrapeJS que vous pourrez faire ça. Néanmoins :

  • Certaines personnes (moi ! moi !) n’ont AUCUNE envie d’apprendre à correctement coder en CSS et GrapeJS permet alors à ces personnes de mener à bien leurs projets malgré tout.
  • J’ai l’impression que le code généré est propre et utilise des technos récentes du Web. Un apprenant des technos web peut parfaitement utiliser cet outil pour voir comment certains designs sont implémentés, quite à le recoder à sa sauce après. Personnellement, le code généré m’a déjà appris l’existence de la propriété flex en CSS et m’a étonné par ma simplicité… C’est (peut-être) un premier pas vers une réconciliation avec le CSS).

Finallement, le seul vrai point négatif que je pourrais lui trouver, c’est que le code généré est très épuré et ne s’embête pas avec les extensions CSS style -moz ou encore -webkit, ce qui veut dire que votre site ne sera pas forcément bien affiché sur internet explorer et autres navigateurs quelque peu obsolètes. A voir avec vous même si cela vous importe ou non.

Conclusion

Bref. Si comme moi le CSS c’est pas votre kiff, sauvez Sean Bean, utilisez GrapesJS.