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.