Focus sur GrapesJS, un framework permettant de construire des pages web visuellement

Le 20/09/2018

Dans Développement

Aujourd'hui le blogduwebdesign fait le focus sur un framework visuel d'édition de templates web : GrapesJS.

Qu'est-ce que GrapesJS ?

GrapesJS est un framework permettant de construire des pages web (ainsi que des templates de newsletters) de manière visuelle.

Pour en savoir plus et si vous ne l'avez pas encore lu, je vous recommande la lecture du premier article que nous avons écrit sur GrapesJS, il y a maintenant un an et demi : Découvrez GrapeJS, un éditeur de template open source que vous pourrez ajouter à vos projets

Quelles nouveautés depuis un an et demi ?

Niveau interface vous ne serez pas perdu même si vous ne l'avez pas touché depuis un an et demi. Le menu "blocks" est passé de la gauche à la droite avec les autres menus.

Enchaînons directement avec la grande nouveauté : Flex. Maintenant que tous les voyants sont au vert niveau support pour cette propriété CSS et en vue de ses avantages, il est grand temps qu'elle se démocratise !

Flex est maintenant le standard pour toute template créée avec GrapesJS. Les code HTML et JS générés n'en sont que plus propres.

Ensuite, nous pouvons noter l'apparition du support des états hover, focus, etc. Il vous sera possible de créer vos interactions directement depuis l'interface. Soyons clairs, il est maintenant tout simplement possible de tout faire depuis l'interface.

Enfin, il peut être noté qu'il existe maintenant un mode complet pour simplifier la création de templates mail et de newsletters.

Notre avis a-t-il changé ?

GrapesJS était et est toujours un excellent outil, mais a gagné, selon nous, une place de choix dans le prototypage et le maquettage des sites.

Peut-être que les nouveaux ajouts ont changé la donne, mais je pense qu'il est maintenant réellement intéressant de prototyper ses templates et pages avec Grapesjs, quite à se passer totalement de la phase photoshop ou sketch pour gagner du temps lors du maquetage et de l'intégration.