Étiquette : Web App

Foundation SaSS, un framework CSS et javascript parfait pour développer le MVP de son applications web.

logo warrigal cœur logo foundation

Foundation 6: personnalisation totale.

Foundation est un framework HTML/CSS/JS qui simplifie la réalisation des interfaces graphiques de vos MVP. Nous utilisons Foundation depuis 2014 pour réaliser des landing pages, des backend d’application web, des front-end d’applications web, des sites e-commerce et des sites internet comme celui sur lequel vous lisez ce billet de blog. L’utilisation d’un outil comme celui-ci nous permet de gagner un temps considérable entre la validation graphique des maquettes visuelles et la réalisation de celles-ci sous forme de pages HTML.

Ce genre de framework donne déjà un avantage face au développement classique d’interfaces web, le fameux combo HTML+CSS+JS. Il nous faut 20 à 30 % de temps en moins pour un résultat identique. Nous avons donc décidé de baser nos réalisations web en utilisant cette technologie. Pas besoin de réinventer la roue, la plupart des éléments nécessaires à la bonne réalisation d’interfaces graphiques sont présents. Nous avons par contre une liberté totale personnalisation. C’est toute la beauté de l’outil.

Foundation 6.5: des fonctionnalités importantes dans la réalisation d’interfaces graphiques pour MVP.

Les différentes améliorations successives ont permis de rendre le framework de plus en plus pratique et rapide à utiliser. Les fonctionnalités importantes de ce framework sont les suivantes :

  • Un système simple de grilles flexbox pour le positionnement des éléments.
  • Des feuilles de styles « variabilisées » pour personnaliser les boutons, les formulaires…
  • Une feuille de style par défaut avec reset, typographies…
  • Un système de layout responsive pour adapter les interfaces graphiques aux différents navigateurs web et mobiles.
  • Des éléments d’interfaces comme des tableaux, onglets, pagination mis en forme en CSS.
  • L’intégration de fenêtres modales.
  • L’ajout de tooltips.
  • Les mises à jour régulières lui permettant de suivre l’évolution des navigateurs.
  • Et bien d’autres.

Lors de sa sortie, Foundation 6.5 comportait de nombreuses nouveautés. Par exemple, l’ajout de Motion UI qui permet l’intégration rapide d’animations et transitions, l’ajout et l’amélioration de divers plug-in tel que Sticky qui permet de fixer un objet au scroll. La grille de positionnement ainsi que les media queries sont elles aussi améliorées et simplifiées.

Un gain de temps énorme. Le temps de compilation divisé par 7 grâce à Panini. De 🚗 à 🏎.

Le plus important avec cette version est Panini qui est propulsé par Gulp. Non, ce n’est pas un sandwich pressé entre deux grilles chaudes.

Un panini chaud

Panini permet la compilation du sass en css, la compilation de tous vos fichiers JS et la compression de vos pages HTML. Cette compilation HTML autorise l’utilisation d’inclusion vous permettant d’utiliser une seule page “header” pour l’intégrer dans toutes vos pages telles que vous le feriez en PHP. Toutes ces compilations sont faites en moins d’une seconde, ce qui est bien plus rapide qu’avec compass, utilisé par la précédente version : Foundation 5. À titre d’exemple, notre dernier projet en Foundation 5 mettait plus de 5 secondes pour terminer sa compilation. Avec Foundation 6 le projet est compilé en 0,750 seconde ! Un vrai plaisir de travailler dans ces conditions. 🎈🎉

50 % de code compilé en moins 🛒, on dirait le black friday.

Au final, votre code compilé est réduit de prêt de 50 %, ce qui est une très grande évolution par rapport à Foundation 5.

Petit désavantage, bien que le poids final de votre code soit très léger, le dossier complet de production avoisine les 100 Mo ce qui peut sembler un peu dérangeant au début, mais quand vous voyez que le résultat est deux fois plus léger que vos projets précédents, cela en vaut vraiment la peine.

Avec plus d’une cinquantaine de projets réalisés entièrement avec Foundation Sass depuis 2014, nous avons eu l’occasion de voir évoluer ce framework et nous en avons acquis une bonne expertise. La puissance, la simplicité et la rapidité de Foundation 6.5 en font un framework très abouti et agréable à utiliser. Nous le conseillons dans un grand nombre de situations et il fait toujours le job, quel que soit le MVP à réaliser.

Le yeti de Foundation avec deux écrans

Vous souhaitez discuter avec nous de votre projet d’application web et de son interface graphique?

Contactez-nous maintenant.