Les Framework CSS

Veille technologique

qu'est ce qu'un Framework CSS ?

Concrètement, c’est un ensemble de fichiers et dossiers livré de façon structurée; le tout est codé en respectant les standards actuels et fonctionne uniformément sur toutes les plateformes et navigateurs actuels.
Ce pack de fichiers fournit un lot de comportements et d’éléments couramment utilisés dans un site web.

Il y a 3 types de fichiers dans le framework : HTML, CSS et JS.
Le language HTML structure les données, le CSS stylise ces données pour les rendre visuellement compréhensibles et esthétiques, le JS (acronyme de Javascript) permet de produire des animations et interactions améliorant l’expérience utilisateur.

Source : Alticreation

Quels sont les éléments proposés

Un framework propose des éléments préformatés et paramétrables pour chacune des composantes identifiées ci-dessus :

  • Un layout complet et manipulable
  • Des modules couvrant tous les aspects et besoins courants (des listes, des boutons, des blocs de titre, des formulaires, des widgets, …)
  • Des états standards (visible ou caché, effet hover, actif ou inactif)
  • Des comportements interactifs multiples (des menus animés type dropdown, ou off canvas, des carousels ou sliders, ligthbox pour agrandir les images, des onglets, interactifs, tooltips, alerts, modals, …)
  • Un design responsive paramétrable (une grille régit le contenu sous forme de colonnes. Les blocs de contenu seront réorganisés afin de s’adapter à la taille de l’écran et d’offrir une expérience utilisateur optimale.)

Source : Alticreation

Les framework les plus populaires

  • Bootstrap compte parmi les plus populaires. Open Source, il présente un nombre important de modules et d’extensions. La documentation disponible est tout aussi impressionnante. Il fonctionne sur un système de grille en douze colonnes avec un affichage adapté pour différentes tailles d’écran et il est possible de personnaliser les fichiers CSS.
  • Foundation dispose d’une grande flexibilité. Il est proposé avec un fichier démo utile pour les débutants et dispose de son propre centre de formation. Il est cependant légèrement plus complexe d’utilisation.
  • Semantic UI se veut plus simple et intuitif. Son principe repose sur l’utilisation d’un langage naturel, accessible aux néophytes, qui permet d’obtenir un code HTML facile à lire et à comprendre.
  • KNACSS est un modèle de framework relativement léger mais complet. Il est conçu en France, ce qui rend la documentation plus accessible.
  • Materialize s’appuie sur les recommandations design de Google et est fourni avec de nombreux composants prêts à l’emploi.
  • Material UIest également basé sur les principes du Material Design de Google, mais il sera d’un abord plus complexe, d’autant qu’il nécessite de comprendre au préalable React.js pour pouvoir l’utiliser.
  • Pure est plus concentré sur la création de sites rapides et responsive, il ne supporte pas les plugins en JS ou Jquery.
  • Skeleton, comme Milligram, sont des frameworks très légers et simples à utiliser. Ils seront pourtant réservés à la création de sites qui ne demandent pas un trop grand nombre de fonctionnalités.

Source : Graphiste.com

Les avantages et les inconvénients de ces framework

Un framework propose de multiples avantages :

  • Gain de temps: Prenons un cas concret. Un nouveau projet arrive sur la table, le développeur front-end doit évaluer le temps de développement mais souvent le temps presse. Alors le framework front-end peut être une bonne alternative. Car le développeur n’aura pas à partir de zéro. Plutôt que de coder et créer l’ensemble des composantes de la page, il aura la tâche d’assembler les éléments préformatés et proposés par le framework. C’est comme si l’on éliminait une étape dans le processus de travail du développeur front-end. On élimine l’étape zéro, celle ou le développeur front-end part de rien ou presque pour créer le site web au complet.

  • Standardisation et performance: Un site développé en utilisant un framework sera performant car le framework est optimisé pour les multiples navigateurs web du marché. Plutôt que d’un site performant on parlera plutôt d’un site optimal, ceci sera expliqué dans les limites du framework front-end.

  • Évolutivité et mise à jour: Le framework est régulièrement mis à jour afin de respecter les derniers standards du web mais aussi afin de proposer des modules pertinants et dans l’air du temps. En utilisant un framework, on bénificie d’un ensemble d’améliorations bénéfiques pour la construction et la mise en place d’un site web devant respecter les derniers standards en vigueur.

  • Gratuit et libre: Les frameworks front-end sont (au moins actuellement) gratuits et libres. Cela signifie qu’il est possible de les utiliser sans payer de licence et de pouvoir les modifier à son gré. C’est du moins le cas pour Bootstrap et Foundation.

  • Fiabilité: Les frameworks les plus populaires par des centaines de milliers de développeurs qui attestent de la qualité et de la fiabilité de l’outil. Les bugs sont presque inexistants.

    En bref, utiliser un framework permet d’éliminer une étape parfois laborieuse qui est celle de concevoir les bases visuelles du site et de créer les différents modules de zéro. En plus de gagner du temps, il fournit une structure éprouvée, solide, et évolutive testée par des milliers d’utilisateurs.

     

Un framework a également des inconvénients :

  • Des sites qui se ressemblent: Une critique récurrente rencontrée sur nombre de forums spécialisés vise l’aspect visuel similaire qu’ont les sites développés avec un framework front-end. Effectivement, si le développeur ne personnalise pas un minimum l’aspect visuel du site, alors le style par défaut (les couleurs, les angles arrondis, les contours, les ombres, la typographie) sera appliqué. Donc, rien ne ressemble plus à un site Bootstrap avec le style par défaut qu’un autre site Bootstrap avec le style également par défaut.

  • Du code inutilisé qui alourdit les pages: Un framework fournit un lot d’éléments qui ne sont parfois pas utilisés dans un projet web. Hors, même si l’on utilise pas certains composants du framework, ils sont tout de même charger par défaut, notamment leurs styles CSS et également les fichiers JS. On se retrouve avec code lourd et partie inutile. Les effets négatifs sont notamment que les pages web se chargeront moins rapidement, et que le développeur en charge de faire évoluer le projet aura parfois du mal à s’y retrouver. Une bonne pratique veut que le développeur qui démarre le projet tâche de rendre muet les appels vers des composants pas nécessaires et qu’il commente et documente un maximum le code généré.

  • Nécessité de modifier ou ajouter du code: Le framework n’a pas réponse à tous les cas de figures. Et il est quasiment certains que le développeur devra modifier ou créer des segments de code supplémentaires pour se rapprocher du design souhaité. Cependant il y a un ensemble de paramètres faciles à modifier au cours du projet, pour peu que l’on utilise un préprocesseur CSS.

  • Modifier ou adapter le code originel du framework peut être long voire laborieux: Lorsque cela est nécessaire, la modification du code ou l’adaptation de celui-ci peut s’avérer laborieux, car on tente de défaire une architecture en imposant de nouveaux critères. Et il n’est pas toujours simple et rapide de modifier des éléments dont le code mêle à la fois du CSS et du HTML et parfois même du JS.

  • Risque de conflits avec d’autres bibliothèques ou plugins: Sur un projet mêlant un CMS comme par exemple WordPress et des plugins comme par exemple Visual Composer (qui permet d’éditer rapidement le contenu des pages). Donc sur ce type de projet, il risque d’y avoir des conflits notamment en raison de déclarations CSS utilisant les mêmes noms de classes ou utilisant des styles CSS peu compatibles avec le CSS du framework front-end choisi. Dans ce cas il faudra non seulement modifier ou adapter le code du framework mais également apporter des modifications au plugin posant conflit. Dans tous les cas, la solution ne sera pas simple.

Source : Alticreation