FRAMEWORK CSS FOUNDATION

FRAMEWORK CSS FOUNDATION
Poids version Complète : 880Ko (197Ko Zip)
Poids version Essential : 483Ko (123Ko Zip)
Foundation est un framework CSS / JS complet permettant de créer rapidement des webdesigns
fluides, compatibles navigateurs et réactifs (responsive webdesign).
C'est la mode des frameworks CSS/JS complets permettant de bien démarrer dans le développement
de ses webdesign. Après Twitter et son Twitter Bootstrap, c'est au tour de Zurb.com de lancer
Foundation, encore plus complet et avec une touche de responsive webdesign.
Le framework embarque un certain nombre de styles et fonctionnalités:
•
•
•
•
•
•
•
•
Un système de grilles pour le positionnement des éléments en CSS
Des feuilles de styles pour personnaliser: Boutons, formulaires, ...
Une feuille de style par défaut avec reset, typographies ...
Un système de layout responsive pour adapter votre site aux différents navigateurs web et
mobiles
Des éléments d'interfaces comme des tableaux, onglets, pagination mis en forme en CSS
Intégration d'un slider d'images: Orbit
Intégration de fenêtres modales / lightbox: Reveal
Etc
Le framework est très simple à utiliser, il vous suffit de charger les styles et JS souhaités dans vos
pages web.
Les utilisateurs de Rails pourront installer très facilement le framework via le Gem du projet.
Introduction au frameworks front-end
Foundation
Les frameworks ou cadriciels en bon français sont des outils de plus en plus courants dans le
processus de création de sites web. On distingue au moins deux types de frameworks : front-end et
back-end.
Les frameworks back-end (comme Symphony, Laravel ou CakePhp) sont déjà utilisés depuis
plusieurs années avec succès, mais qu’en est-il des frameworks front-end ?
Depuis deux ans environ, ces frameworks sont devenus presque incontournables. Nous allons
découvrir dans cet article, ce qu’est un framework front-end, pourquoi en utiliser un, identifier les
différents frameworks et enfin en analyser les limites.
Qu’est-ce qu’un framework front-end ?
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 langage 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.
Pour bien comprendre, nous allons identifier les composantes (et donc les besoins) d’une page web
classique, ils seront décrits dans l’encadré suivant :
Les composantes d’une page web
la base
– La typographie (police, taille, titres, paragraphe)
– Les autres aspects généraux par défaut que l’on retrouve sur toutes les pages du site
Le Layout
Ce sont les zones principales qui architecturent une page, et que l’on retrouve presque
systématiquement sur toute page web :
– Un zone d’en-tête (ou header) comportant le logo par exemple.
– Un menu principal (ou navigation) des pages du site web.
– Un zone de contenu principal, avec éventuellement une barre latérale (ou sidebar)
– Un pied de page (ou footer)
* Layout en rouge dans la figure : header, slider area, contenu principal, footer.
Les modules
Des modules récurrents composent ces zones du Layout, comme :
– des listes
– des boutons
– des blocs de titre
– des formulaires
– des widgets
* Modules en vert dans la figure : module de recherche, slider, zone image, titre, triptyque
colonnes, liste de pages dans le footer.
Les états
Et ces modules peuvent avoir eux-même des états différents :
– visible ou caché
– effet hover
– actif ou inactif
– etc. …
* États en bleu dans la figure : dropdown du menu, slide active du slider représenté par un disque
sombre.
Les comportements interactifs
Pour rendre l’expérience utilisateur plus riche, un ensemble d’animations et de comportements
interactifs sont identifiables :
– des menus animés (type dropdown, ou off canvas)
– des carousels (ou sliders)
– ligthbox pour agrandir les images
– des onglets interactifs
– tooltips, alerts, modals …
* Il s’agit dans la plupart des cas de comportements utilisants le language Javascript.
Illustration d’une page web au contenu identique se réorganise automatiquement en fonction du
support utilisé.
Le responsive design et la grille
Lorsqu’une page web est conçue pour réorganiser son contenu de façon optimale pour différentes
tailles d’écran, il s’agit alors de responsive design.
Un site devient ainsi accessible sur un ordinateur classique (desktop), sur une tablette ou encore un
téléphone mobile (type iPhone, Android) tout en réorganisant un contenu unique, certains blocs de
contenus seront sur deux ou trois colonnes, cacher ou modifier selon le terminal utilisé.
La 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.
«Le framework front-end répond au besoin de chacune des composantes d’un
site web»
Maintenant que nous avons découpé clairement les composantes d’une page web classique, il est
plus aisé de comprendre ce que peut apporter un framework front-end.
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 états standards
– Des comportements interactifs multiples
– Un design responsive paramétrable
Le framework est en d’autres termes un « kit de démarrage front-end » composé de briques
personnalisables. On peut aisément sortir de l’aspect graphique par défaut proposé par le
framework.
Foundation de Zurb
Il est moins populaire que Bootstrap, car un peu plus pointu. Mais Foundation est en tout point
semblable à Bootstrap.
Foundation propose :
– une grille responsive, des style CSS pour les éléments HTML courants
– des composants JS d’ailleurs un peu plus fournis que sur Bootstrap
Par contre pas de set d’icones fourni par défaut. Il est de toute façon très simple d’en insérer un.
Il est possible de consulter de nombreux templates de pages conçus avec Foundation. Ce framework
quant à lui, n’est pas compatible avec le préprocesseur de CSS appelé LESS CSS. Foundation
supporte uniquement SASS.
Dans l’ensemble Foundation est un outil qui semble plus complet mais moins évident à prendre en
main que Bootstrap. Il s’adresse aux développeurs front-end (ou intégrateur web) plus
pointus. Foundation semble également plus à même de répondre pleinement à des projets web
d’envergure demandant plus de souplesse.
En savoir plus sur Foundation
Tous les composants de Foundation
Pourquoi utiliser un framework front-end en 5 points
Un framework propose de multiples avantages :
1. 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.
2. 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.
3. É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.
4. 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.
5. 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.
Les limites du framework front-end en 5 points
1. 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.
2. 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é.
3. 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.
4. 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.
5. 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.
Conclusion
Le framework front-end est un outil de plus dans la panoplie du développeur front-end. Il est très
pratique pour créer des wireframes, des prototypes ou des maquettes simples dans le cadre de projet
web léger. Le temps économisé au début du projet est indéniable. Il faut connaître les limites du
framework avant de le choisir pour un projet web plus conséquent. L’idéal est que les designers et
wireframers qui imaginent et conçoivent la structure et l’apparence du site web connaissent le
framework afin de proposer des wireframes et des maquettes graphiques compatibles. Dans tous les
cas, l’utilisation d’un framework pose un cadre de travail standardisé en suivant des règles
préétablies. Cela permet de transmettre le projet d’un développeur à un autre en minimisant le
temps de réappropriation. Enfin, le framework tire sa pleine puissance en étant utilisé en
combinaison avec un préprocesseur CSS (LESS ou SASS). Le code créé sera encore plus modulaire
et facilement modifiable.