Framework CSS: Foundation

Presque quatre ans après avoir testé des frameworks CSS, je reviens sur le sujet, avec de nouveaux essais. Certains vont me dire que c’est une obsession. En fait, j’espère toujours trouver le framework qui me permettra de construire des thèmes, sans y passer des heures à cause de CSS.
Je me suis intéressé à deux frameworks en particulier, qui me semblent intéressants: Foundation, et Boostrap.

Il existe aujourd’hui, une multitude de frameworks CSS. Pourquoi avoir choisi ceux-là en particulier?

J’ai plutôt procédé par élimination, que par sélection:

  • J’ai d’abord enlevé tous les frameworks qui ne proposaient pas de grille fluide, et qui ne prenaient pas en compte HTML 5,
  • J’ai ensuite éliminé tous les frameworks qui se contentaient de convertir les grilles fixes comme celle de 960gs ou BluePrint CSS, en grilles fluides,
  • J’ai également abandonné les frameworks qui ne géraient pas les anciens navigateurs (je ne parle pas du très réputé IE6, mais juste IE7 ou FF3),

La liste est déjà nettement moins importante qu’elle ne l’était auparavant. A partir de là, Foundation, et Boostrap se sont imposés, un peu pour les mêmes raisons:

  • Ce sont de véritables frameworks. Ils ne proposent pas uniquement une grille, et des styles typographiques,
  • Leur grille n’est pas uniquement fluide, elle est également « responsive »,
  • Ils prennent en compte, à la fois les techniques les plus modernes (HTML5, CSS3, …), mais en gardant une certaine compatibilité avec des navigateurs plus anciens.

Je vais commencer la description de Foundation, dans cet article, et je traiterai de Boostrap dans un article suivant.

Commençons donc notre étude de Foundation.

Composants

Ce framework propose 8 modules:

Composant Rôle
Global Inclut les styles Reset (ceux de Meyer), et les styles de typographie.
The Grid Comme son nom l’indique, il s’agit de la grille, fluide, de 12 colonnes,
Buttons Une panoplie complète de boutons, avec ou sans bords ronds, avec ou sans dégradé,
Forms inclut des styles, des scripts javascript, pour formater vos formulaires. Sont inclus des styles, pour l’affichage de messages d’erreurs, ou pour colorer un champ non rempli, …
Layout Ce composant est lié à la grille. Il comporte des classes CSS permettant de rendre cette grille « responsive ». Ces classes peuvent également s’appliquer au contenu.
UI Regroupe des éléments comme des menus, des tabulations, des messages d’alertes, des barres de navigation
Orbit Ce module est un slider pour des images, et différents autres types de contenu (script Javascript)
Reveal Egalement un script Javascript permettant de construire des interactions avec les utilisateurs en mode « modal ».

Foundation s’appuie sur HTML 5 Boilerplate.

La grille fluide

Ce framework reprend le concept de grille: découpage en colonnes, séparées par une gouttière. Ici la grille est fluide. La différence avec d’autres frameworks réside dans les proportions choisies: La largeur d’une colonne est de 4.3%, la largeur de la gouttière est de 4.4%.

Ces proportions peuvent paraître complètement « étranges », mais elles ont deux conséquences

  • d’abord, la grille est très aérée (qui correspond aux designs actuels),
  • ensuite les problèmes d’alignements des blocs imbriqués (nested blocks) sont moins visibles.

Les autres caractéristiques de la grille sont relativement standards: 12 colonnes, pour une largeur maximum de 980 pixels.

La grille

Exemple de réalisation: pour reproduire la structure de ce thème avec Foundation, nous aurions un code de ce genre

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 <header class="container">
	  <hgroup class="row">
		<div class="seven columns">
		  <h1>Emmanuel GEORJON</h1>
		</div>
		<div class="five columns">
			Photo numerique et technologies web
		</div>
	  </hgroup>
	  <nav class="row">
		<ul>
			<li class="three columns">Perso</li>
			<li class="three columns">Techno</li>
			<li class="three columns">Photo</li>
			<li class="three columns">Dev</li>
		</ul>
	  </nav>
</header>
<div class="container">
	<div class="row">
		<section id="content" class="eight columns" role="main">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		</section>
		<section id="secondary" class="four columns" role="complementary">
			<div class="row">
				<aside class="twelve columns">
					<h2>A propos</h2>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
				</aside>
			</div>
			<div class="row">
				<aside class="twelve columns">
					<h2>Recherche</h2>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
				</aside>
			</div>
			<div class="row">
				<aside class="twelve columns">
					<h2>Series</h2>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
				</aside>
			</div>
			<div class="row">
				<aside class="twelve columns">
					<h2>Mots-cles</h2>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
				</aside>
			</div>
		</section>
	</div>
</div>
<footer class="container">
	<div class="row">
		<aside class="three columns">
			<h2>Archives</h2>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
		</aside>
		<aside class="three columns">
			<h2>Favoris</h2>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
		</aside>
		<aside class="three columns">
			<h2>A propos</h2>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
		</aside>
		<aside class="three columns">
			<h2>Suivez-moi</h2>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis.
		</aside>
	</div>
</footer>

Ce qui donne:

Structure du blog

Pour construire la grille, nous avons

  • Les containeurs: container, et row (ce dernier détermine la largeur maximale),
  • Les éléments eux-mêmes (one, two, … twelve),
  • Les offsets, équivalent des pull dans d’autres frameworks, (offset-by-one, offset-by-two, …),
  • La possibilité de centrer les éléments (centered),
  • La possibilité de changer l’ordre des éléments, équivalent des push dans d’autres frameworks (push-one, push-two, …).

Grille « responsive » avec le module Layout

Sans rien changer au code HTML, si nous réduisons la surface d’affichage, nous obtenons ceci (sans Javascript):

La même structure après réduction de la largeur

Le point de rupture est situé à 768px.

C’est l’autre aspect intéressant du framework: par défaut le design offre déjà un comportement responsive. Mais nous pouvons intervenir sur ce comportement, avec ce que j’appelle les styles conditionnels. Foundation fournit, en effet, des classes CSS comme

  • show-on-desktops ou hide-on-phones, dont on perçoit immédiatement l’usage,
  • mais également des classes « responsive ». Par exemple: <div class="three phone-one columns"> , est un bloc de 3 unités de large, sauf sur smartphone, ou la largeur va descendre à une unité.

Nous avons donc phone-one, phone-two, phone-three, phone-four, ainsi que show-on-desktops / hide-on-desktops, show-on-tablets / hide-on-tablets, et show-on-phone / hide-on-phone

L’autre point positif est que le contenu est également impacté: les éléments du module UI notamment, sont traités (Les menus, les tabulations, les images, les vidéos les boutons).

Typographie

Contrairement à d’autres frameworks, Foundation ne met pas trop en avant les éléments typographiques. Je n’ai pas trouvé de page montrant tous les styles typographiques disponibles.

Le rythme vertical est fixé à 18px (line-height), la taille par défaut des caractères est fixée à 13px. ce qui est relativement dense.

Les styles sont basés sur un savant mélange d’unités exprimés en px, et/ou en rem, …

1
2
3
4
5
6
7
8
9
10
html { font-size: 62.5%;  /* 10px */ }
body { font-size: 13px; 	line-height: 18px; }
h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px;}
h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; }
h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 9px; }
h4 { font-size: 21px; font-size: 2.1rem; margin-bottom: 3px; }
h5 { font-size: 18px; font-size: 1.8rem; font-weight: normal; margin-bottom: 3px;  }
h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; }

J’ai testé le rythme vertical avec une page que j’utilise pour cela, et les résultats ne sont pas très brillants (avec Firefox, comme avec Internet Explorer).

Typographie et rythme vertical

Les autres modules

Tous les modules sont liés à la grille et au module layout, dans le sens où ils savent se redimensionner lorsqu’il le faut. C’est cette caractéristique qui les rend réellement intéressants.

Le module Buttons

Buttons propose, comme son nom l’indique, des boutons, de 3 tailles, 5 couleurs, avec coins arrondis, avec ou sans dégradés.

Les boutons

Le rendu « gloss » de ces boutons, est obtenu avec un mélange d’images,  et de propriétés « gradient » (-moz-linear-gradient, et -webkit-gradient).

Le module UI (User Interface)

Ce module est un ensemble de styles CSS, et de scripts Javascript (basés sur JQuery). Il permet l’affichage et la gestion d’éléments comme des boîtes d’alertes, des infos-bulles, des systèmes d’onglets horizontaux et verticaux, des menus horizontaux et verticaux, des barres de pagination, et un fil d’ariane.

Une démo est disponible sur la page User Interface de la « documentation » de Foundation.

Il faut noter que tous ces éléments sont « responsives ». Un menu, par exemple, passera du mode horizontal à vertical lorsque la largeur descend en dessous d’un certain seuil.

Pour moi, ce module constitue le deuxième réel intérêt de ce framework (avec la grille). Il permet en effet, le développement, avec un minimum d’effort, d’une interface élaborée prenant en compte de nombreuses situations.

Le module Forms

Ce module regroupe tous les outils nécessaires à la construction des formulaires. Là encore nous avons des classes CSS, et une partie javascript (légère, moint de 3Ko). Les classes sont assez simples à utiliser. Nous avons par exemple:

  • Pour les champs « texte », nous avons les classes: small, medium, large, expand, pour définir la largeur du champ,
  • Si les champs sont contenus dans une balise dont la classe est error, ils apparaîtront en rouge,

La structure des styles la rend personnalisable: il est donc aisé de changer les couleurs par exemple. Aller au-delà revient à réécrire les classes existantes.

Le composant Orbit

Orbit est un slider assez léger (7ko), basé sur JQuery. Il sait gérer des images, mais également d’autre type de contenu. Son fonctionnement et son mode de configuration sont classiques, et ressemblent à ceux de beaucoup d’autres sliders.

Pour moi, Orbit a deux intérêts: d’une part, nous n’avons pas à nous poser de questions sur son intégration, et d’autre part, il est fluide. Mais il n’est pas obligatoire de l’utiliser avec le framework.

Le composant Reveal

Ce module Javascript gère l’affichage d’une fenêtre « modale ». Le script est relativement léger (7 Ko).

Le module Reveal

Le module est assez simple d’emploi. Il faut

  • Charger le script en début de page,
  • Placer quelques lignes de javascript en fin de page pour l’activer,
  • Décrire la fenêtre (HTML classique).

License

Foundation est disponible sous licence MIT Open Source. Pour résumer, on peut faire ce que l’on veut du code, à condition de mentionner le copyright.

Compatibilité

Sur PC de bureau ou portable, Foundation annonce une compatibilité avec la plupart des navigateurs du marché, allant jusqu’à Internet Exploer 7. Internet Explorer 6 est exclu (ce qui me semble normal maintenant).

La compatibilité avec Internet Explorer 7 est assurée par l’utilisation du script Modernizr, ce qui est logique parce qu’il fait partie de la panoplie Boilerplate.

Sur les smartphones, seuls les équipements tournant sous iOS (Webkit, jusqu’à IOS 5) et Androïd sont supportés.

Environnement / Communauté

Foundation intéresse beaucoup de développeurs, et notamment des développeurs de thèmes WordPress. Nous avons, par exemple,

Les premiers outils commencent à apparaître également, avec notamment un générateur de grille, qui pour l’instant est assez rudimentaire.

La documentation sur le site de Foundation est relativement mince. Il faut la compléter avec des infos présentes sur GitHub, et sur Google Group.

Conclusion

Le framework Foundation est, pour moi, un bon compromis entre fonctionnalité, et complexité. Les deux principales valeurs ajoutées d’un framework sont de pouvoir développer rapidement une page/un site robuste.

Foundation remplit parfaitement ces deux « missions », avec notamment avec deux de ces modules: Grid/Layout, et UI, qui proposent par défaut un design fluide, et responsive.

Points forts

  • La grille fluide, et responsive sans effort,
  • Le module UI,
  • Le développement semble être assez actif,
  • La communauté semble également présente, et l’on trouve relativement vite des solutions sur le forums.

Points faibles

  • La grille est très bien, mais elle oblige à ajouter beaucoup trop souvent des containeurs avec la classe CSS row,
  • La typographie ne permet pas d’obtenir un rythme vertical correct,
  • La documentation est un peu mince,
  • La feuille de styles inclut les styles de tous les modules, ce qui représente 57ko. Il aurait été intéressant de proposer une feuille de styles par module, que l’on aurait pu assembler en fonction des besoins.

1 thought on “Framework CSS: Foundation”

  1. Merci pour cet article intéressant.
    À quand l’article sur Bootstrap ? ^^
    Au final, préférez-vous utiliser Fondation ou Boostrap pour vos développements ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *