Framework CSS – Blueprint, YAML, Elastic… Effet de mode ou Lame de fond ?

by Posted on


Comme une tendance qui s’impose désormais massivement pour le PHP notamment, l’apparition des frameworks gagne aussi les feuille de style CSS. Après le déferlement déjà ancien des CSS à la Zen Garden qui éradiqua les table du code html, voilà donc l’étape suivante qui est celle de concevoir ses CSS à l’aide d’un framework. Vous pourrez éventuellement tirer profit des mêmes avantages que des frameworks que vous pouvez connaître par ailleurs dans un autre langage: PHP, Python, Ruby on Rails, Javascript…etc.

A ce titre, si le PHP est votre langage de prédilection, je vous invite à lire un article de ce blog que nous avons consacré à notre framework php favori : CodeIgniter.

Plus doctement, l’effervescence dans le monde de la CSS est le reflet d’interrogations plus large sur la conception des IHM et leur portabilité sur des supports existants ou futurs. Le sujet inclut assurément les enjeux d’accessibilité ou la construction de widgets par exemple. Implicitement, cela pose deux question : que restera-t-il une fois l’agitation passée et enfin aujourd’hui est-ce opportun de faire mouvement ?

Le choix du framework CSS

Nous avons arrêté notre choix sur 3 Frameworks CSS dont la notoriété va croissante. Pour une liste plus importante, reportez-vous à l’article de w3avenue.com qui indexe un plus grand des frameworks CSS existants et les classe selon la typologie suivante : “Complete CSS Frameworks” vs “Limited CSS Frameworks”. Pour cette article, nous nous plaçons dans ce que l’article nomme les “Complete CSS Frameworks”, c’est à dire ce les frameworks les plus exhaustifs et complets en terme de possibilités .

Les critères de sélection du framework

Ces critères sont intrinsèquement liés aux principes même du framework, en clair tout bon framework CSS répond à ces critères. C’est un pré-requis, les 3 frameworks sélectionnés y répondent. La différence ne se fera ainsi que sur d’éventuels plus mis à disposition de l’utilisateur outre l’opportunité d’utiliser un framework pour votre projet de site. Les principaux critères sont les suivants :

  • La notion de reset. Le reset bazarde toutes les règles par défaut établies par n’importe lequel des navigateurs. Vous partez donc sur un style “fresh and clean”. C’est un des avantages mais qui peut-être utilisé indépendamment de l’utilisation d’un CSS.
  • La notion de fonts ou Typography. C’est grosso modo le fichier de gestion des polices sur un site. Usage complexe et déterminant si il en est pour appartenir à ce qui a constitué un des points importants de la vieille révolution dite 2.0 : font-family:verdana,"Lucida Grande",arial,helvetica,sans-serif; auquel on peut ajouter font-family:georgia; parce j’ai “georgia on my mind”.
  • La notion de “grid” ou “layout”. C’est la CSS qui permettra de dessiner vos interfaces et leur rendu sous tous les navigateurs
  • Une prise en main facilitée comprenant de la documentation, l’existence éventuel de tutoriaux, des exemples…etc

La marque Bleue BLUEPRINT

Ce framework répond à l’ensemble des points cités… L’inclusion est extrêmement aisé et il présente un tutorial et de nombreux exemples pour vous aider à la prise en main. Ce framework inclut même deux scripts pour vous aider dans votre optimisation CSS.

Les balises d’insertion

  <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
  <!--[if lt IE 8]>
    <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
  <![endif]-->

Deux scripts

  • L’un de validation en ruby nommé Validator. Il permet à tout moment de faire valider vos CSS aux règles W3C.
  • L’autre de compression de CSS en ruby toujours nommé Compressor. Comme les fichiers CSS sont eux mêmes compressés, il vous faudra les recompresser une fois vos changements terminés. Le compressor est donc là pour vous aider.

Il vous faudra tout de même installer ruby pour pouvoir vous en servir. Un usage plus sophistiqué peut-être fait avec le recours à des fichiers de configuration .yml. Un exemple de ce type de fichier vous est fourni à titre d’exemple.

Pour connaître les arguments à passer pour ce sript

	ruby compress.rb -h

L’utilisation du script de compression avec un fichier de configuration .yml

	ruby compress.rb -p project1

exmple de fichier .yml

project1:
  path: /path/to/my/project/stylesheets
  namespace: custom-namespace-1-
  custom_css:
    ie.css:
      - custom-ie.css
    print.css:
      - docs.css
      - my-print-styles.css
    screen.css:
      - subfolder-of-stylesheets/sub_css.css
  custom_layout:
     column_count: 12
     column_width: 70
     gutter_width: 10

Conclusion : un framework très complet, très documenté mais un peu ardu dans sa compréhension.

YAML “Yet Another Multicolumn Layout”

De loin, la meilleur documentation et la meilleur prise ne main pour tout le monde du débutant à l’intégrateur plus aguerri. Il existe sur la homepage du site officiel, tout ce que vous devez connaître pour utiliser ce framework : YAML Download-Package, YAML Documentation (pdf en anglais et en allemand), YAML “Simple Project” Template.

Le site mets aussi un “YAML-Builder” qui facilitera l’utilisation du framework. Avant, désactivez firebug si vous êtes sur firefox car c’est incompatible.

Les écrans du YAML-Builder

Le YAML-Builder en conflit avec firebug

Framework CSS - Blueprint, YAML, Elastic... Effet de mode ou Lame de fond ?

Le YAML-Builder en action une fois firebug désactivé
Framework CSS - Blueprint, YAML, Elastic... Effet de mode ou Lame de fond ?

Le YAML-Builder vous permet de visualiser votre CSS et de récupérer le code
Framework CSS - Blueprint, YAML, Elastic... Effet de mode ou Lame de fond ?

Conclusion : Le plus pédagogique, le YAML-Builder est un atout pour commencer.

Le contenu du readme.txt de YAML “Yet Another Multicolumn Layout”

 
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * @copyright       Copyright 2005-2009, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.1
 * @revision        $Revision: 343 $
 * @lastmodified    $Date: 2009-01-19 23:41:32 +0100 (Mo, 19. Jan 2009) $
 */
 
 
Table of contents
---------------------------
 
  * documentation/
    The full documentation is available for download at http://www.yaml.de/en/. The documentation comes as a
    PDF file in German and English.
 
  * examples/
    This folder contains several examples for the practical usage of the YAML framework.
    It's all there for your inspiration.
 
  * js/
    This folder contains a small script for dumy texts as well as the JavaScript library jQuery.
 
  * tools/
    This folder contains several tools for developing layouts. The files in this folder are not necessary 
    for the framework's functionality and need not be placed on the live server.
 
  * yaml/
    This folder contains all framework files. To use the framework, copy this folder onto your webserver.
 
 
The current version 3.1.x
-------------------------
 
A detailed overview of all the new functions and modifications to the new version is available in the Changelog (http://www.yaml.de/en/documentation/changelog/version-3x.html).

Elastic CSS Framework

Le dernier des framework , outre qu’il soit en accord aux principes énoncés plus haut, les créateurs indiquent une information qui n’est présente dans aucun des frameworks précédents et qui a quand même une importance capitale : la compatibilité avec les navigateurs et les plates-formes utilisateurs.

Un tour rapide des navigateurs sans toucher l’Elastic

Les créateurs d’Elastic affirment que leur framework a été testé sur les couples navigateurs/plates-formes utilisateurs suivantes, autant dire presque 99% du marché !

  • Firefox 2 mac, windows, linux
  • Firefox 3 mac, windows, linux
  • Safari 3 mac and windows
  • Safari 4
  • Opera 9.6 linux
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8 Beta 2

Le code d’insertion du framework Elastic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" media="all" href="reset.css" />
		<link rel="stylesheet" type="text/css" media="all" href="base.css" />
		<link rel="stylesheet" type="text/css" media="all" href="fonts.css" />
		<link rel="stylesheet" type="text/css" media="all" href="class.css" />
		<link rel="stylesheet" type="text/css" media="all" href="grid.css" />
		<link rel="stylesheet" type="text/css" media="print" href="print.css" />
		<script src="jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="engine.js" type="text/javascript" language="javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="unit three-columns">
			<div class="column">first column content</div>
			<div class="column">second column content</div>
			<div class="column">third column content</div>
		</div>
	</body>
</html>

Modèles d’Elastic

Un très grand nombre de modèles sont à votre disposition, ce qui n’est jamais inutile.
layout based on 1 column, layout based on 2 columns,... But i really really need more columns
Les templates procèdent par ce jeu de questions-réponses plutôt simple et efficace pour l’implémentation.

Jquery to the rescue

Le framework embarque avec lui le framework javascript jquery pour vous permettre éventuellement de passer de nouvelles valeurs à la volée pour des resizes notamment.

<script type="text/javascript" language="javascript" charset="utf-8">
	// direct call 
	Elastic.refresh();
</script>
<script type="text/javascript" language="javascript" charset="utf-8">
	// jquery event invocation
	$(document).trigger('elastic');
</script>

Conclusion : Le plus rapide dans sa prise en main. Un grand nombre de modèles à disposition prêt à l’emploi et une information sur la validité sur les plate-formes utilisateurs.

Utiliser un framework CSS ou pas ?

Finalement, comme le dit un article cité plus bas Cf MarcArea Weblog, les frameworks sont un peu lourds à manipuler pour un petit projet avec peu d’intervenants, peu de jours de production et de développement. Toutefois, sur un projet plus ambitieux, notamment en collaboration avec plusieurs intégrateurs XHTML, c’est une façon de normaliser la nomenclature des classes et de faciliter la collaboration. Vous aurez ainsi les mêmes avantages que dans un autre framework pour un langage différent type PHP par exemple, à savoir normalisation et réutilisation. Le framework est bien sûr totalement inopérant si vous partez sur un CMS genre Drupal, Worpress puisque vous êtes plutôt dans le “theming” propre au CMS utilisé, à moins de substituer l’ensemble des CSS par celles du framework, ce qui est un travail fastidieux. Idéalement il resterait sans doute à créer une librairie dans un langage dynamique pour permettre de l’output de CSS.

Pour aller plus loin

Vidéos

Le fichier CSS signifie aussi “Cansei de Ser Sexy”. Pointu dans son genre mais rien à voir avec les CSS du dessus.
CSS – – Off The Hook

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts