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\u00e9 sur des supports existants ou futurs. Le sujet inclut assur\u00e9ment les enjeux d\u2019accessibilit\u00e9 ou la construction de widgets par exemple.<\/b> Implicitement, cela pose deux question : que restera-t-il une fois l’agitation pass\u00e9e et enfin aujourd’hui est-ce opportun de faire mouvement ?<\/p>\nLe choix du framework CSS<\/h4>\n
Nous avons arr\u00eat\u00e9 notre choix sur 3 Frameworks CSS dont la notori\u00e9t\u00e9 va croissante. Pour une liste plus importante, reportez-vous \u00e0 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\u00e7ons dans ce que l’article nomme les “Complete CSS Frameworks”, c’est \u00e0 dire ce les frameworks les plus exhaustifs et complets en terme de possibilit\u00e9s .<\/p>\n
Les crit\u00e8res de s\u00e9lection du framework<\/h4>\n
Ces crit\u00e8res sont intrins\u00e8quement li\u00e9s aux principes m\u00eame du framework, en clair tout bon framework CSS r\u00e9pond \u00e0 ces crit\u00e8res. C’est un pr\u00e9-requis, les 3 frameworks s\u00e9lectionn\u00e9s y r\u00e9pondent.<\/b> La diff\u00e9rence ne se fera ainsi que sur d’\u00e9ventuels plus mis \u00e0 disposition de l’utilisateur outre l’opportunit\u00e9 d’utiliser un framework pour votre projet de site. Les principaux crit\u00e8res sont les suivants :<\/p>\n Ce framework r\u00e9pond \u00e0 l’ensemble des points cit\u00e9s… L’inclusion est extr\u00eamement ais\u00e9 et il pr\u00e9sente un tutorial et de nombreux exemples pour vous aider \u00e0 la prise en main. Ce framework inclut m\u00eame deux scripts pour vous aider dans votre optimisation CSS.<\/p>\n Les balises d’insertion<\/b><\/p>\n Deux scripts<\/b><\/p>\n Il vous faudra tout de m\u00eame installer ruby pour pouvoir vous en servir. Un usage plus sophistiqu\u00e9 peut-\u00eatre fait avec le recours \u00e0 des fichiers de configuration Pour conna\u00eetre les arguments \u00e0 passer pour ce sript<\/b><\/p>\n L’utilisation du script de compression avec un fichier de configuration exmple de fichier Conclusion<\/b> : un framework tr\u00e8s complet, tr\u00e8s document\u00e9 mais un peu ardu dans sa compr\u00e9hension.<\/p>\n De loin, la meilleur documentation et la meilleur prise ne main pour tout le monde du d\u00e9butant \u00e0 l’int\u00e9grateur plus aguerri. Il existe sur la homepage du site officiel, tout ce que vous devez conna\u00eetre pour utiliser ce framework : YAML Download-Package, YAML Documentation (pdf en anglais et en allemand), YAML “Simple Project” Template.<\/p>\n Le site mets aussi un “YAML-Builder” qui facilitera l’utilisation du framework. Avant, d\u00e9sactivez firebug si vous \u00eates sur firefox car c’est incompatible.<\/p>\n Le YAML-Builder en conflit avec firebug<\/b><\/p>\n Le YAML-Builder en action une fois firebug d\u00e9sactiv\u00e9<\/b> Le YAML-Builder vous permet de visualiser votre CSS et de r\u00e9cup\u00e9rer le code<\/b> Conclusion<\/b> : Le plus p\u00e9dagogique, le YAML-Builder est un atout pour commencer.<\/p>\n Le contenu du Le dernier des framework , outre qu’il soit en accord aux principes \u00e9nonc\u00e9s plus haut, les cr\u00e9ateurs indiquent une information qui n’est pr\u00e9sente dans aucun des frameworks pr\u00e9c\u00e9dents et qui a quand m\u00eame une importance capitale : la compatibilit\u00e9 avec les navigateurs et les plates-formes utilisateurs<\/strong>. <\/p>\n Les cr\u00e9ateurs d’Elastic affirment que leur framework a \u00e9t\u00e9 test\u00e9 sur les couples navigateurs\/plates-formes utilisateurs suivantes, autant dire presque 99% du march\u00e9 !<\/p>\n Le code d’insertion du framework Elastic<\/b><\/p>\n Un tr\u00e8s grand nombre de mod\u00e8les sont \u00e0 votre disposition, ce qui n’est jamais inutile. Le framework embarque avec lui le framework javascript Conclusion<\/b> : Le plus rapide dans sa prise en main. Un grand nombre de mod\u00e8les \u00e0 disposition pr\u00eat \u00e0 l’emploi et une information sur la validit\u00e9 sur les plate-formes utilisateurs.<\/p>\n Finalement, comme le dit un article cit\u00e9 plus bas Cf MarcArea Weblog, les frameworks sont un peu lourds \u00e0 manipuler pour un petit projet avec peu d’intervenants, peu de jours de production et de d\u00e9veloppement. Toutefois, sur un projet plus ambitieux, notamment en collaboration avec plusieurs int\u00e9grateurs XHTML, c’est une fa\u00e7on de normaliser la nomenclature des classes et de faciliter la collaboration. Vous aurez ainsi les m\u00eames avantages que dans un autre framework pour un langage diff\u00e9rent type PHP par exemple, \u00e0 savoir normalisation et r\u00e9utilisation. Le framework est bien s\u00fbr totalement inop\u00e9rant si vous partez sur un CMS genre Drupal, Worpress puisque vous \u00eates plut\u00f4t dans le “theming” propre au CMS utilis\u00e9, \u00e0 moins de substituer l’ensemble des CSS par celles du framework, ce qui est un travail fastidieux. Id\u00e9alement il resterait sans doute \u00e0 cr\u00e9er une librairie dans un langage dynamique pour permettre de l’output de CSS.<\/p>\n Le fichier CSS signifie aussi “Cansei de Ser Sexy”. Pointu dans son genre mais rien \u00e0 voir avec les CSS du dessus. Comme une tendance qui s’impose d\u00e9sormais massivement pour le PHP notamment, l’apparition des frameworks gagne aussi les feuille de style CSS. Apr\u00e8s le d\u00e9ferlement d\u00e9j\u00e0… <\/p>\n\n
font-family:verdana,\"Lucida Grande\",arial,helvetica,sans-serif;<\/code> auquel on peut ajouter font-family:georgia;<\/code> parce j’ai “georgia on my mind”.<\/li>\nLa marque Bleue BLUEPRINT<\/h4>\n
\r\n <link rel=\"stylesheet\" href=\"css\/blueprint\/screen.css\" type=\"text\/css\" media=\"screen, projection\">\r\n <link rel=\"stylesheet\" href=\"css\/blueprint\/print.css\" type=\"text\/css\" media=\"print\"> \r\n <!--[if lt IE 8]>\r\n <link rel=\"stylesheet\" href=\"css\/blueprint\/ie.css\" type=\"text\/css\" media=\"screen, projection\">\r\n <![endif]-->\r\n<\/pre>\n
\n
Validator<\/code>. Il permet \u00e0 tout moment de faire valider vos CSS aux r\u00e8gles W3C.<\/li>\nCompressor<\/code>. Comme les fichiers CSS sont eux m\u00eames compress\u00e9s, il vous faudra les recompresser une fois vos changements termin\u00e9s. Le compressor est donc l\u00e0 pour vous aider.<\/li>\n<\/ul>\n.yml<\/code>. Un exemple de ce type de fichier vous est fourni \u00e0 titre d’exemple. <\/p>\n\r\n\truby compress.rb -h\r\n<\/pre>\n
.yml<\/code><\/b><\/p>\n\r\n\truby compress.rb -p project1\r\n<\/pre>\n
.yml<\/code><\/b><\/p>\n\r\nproject1:\r\n path: \/path\/to\/my\/project\/stylesheets\r\n namespace: custom-namespace-1-\r\n custom_css:\r\n ie.css:\r\n - custom-ie.css\r\n print.css:\r\n - docs.css\r\n - my-print-styles.css\r\n screen.css:\r\n - subfolder-of-stylesheets\/sub_css.css\r\n custom_layout:\r\n column_count: 12\r\n column_width: 70\r\n gutter_width: 10\r\n<\/pre>\n
YAML “Yet Another Multicolumn Layout”<\/h4>\n
Les \u00e9crans du YAML-Builder<\/h4>\n
![\"Framework](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/07\/framework_css_1.jpg\")
<\/p>\n
\n![\"Framework](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/07\/framework_css_2.jpg\")
<\/p>\n
\n![\"Framework](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/07\/framework_css_3.jpg\")
<\/p>\nreadme.txt<\/code> de YAML “Yet Another Multicolumn Layout”<\/b><\/p>\n\r\n\r\n\/**\r\n * \"Yet Another Multicolumn Layout\" - (X)HTML\/CSS Framework\r\n *\r\n * @copyright Copyright 2005-2009, Dirk Jesse\r\n * @license CC-A 2.0 (http:\/\/creativecommons.org\/licenses\/by\/2.0\/),\r\n * YAML-C (http:\/\/www.yaml.de\/en\/license\/license-conditions.html)\r\n * @link http:\/\/www.yaml.de\r\n * @package yaml\r\n * @version 3.1\r\n * @revision $Revision: 343 $\r\n * @lastmodified $Date: 2009-01-19 23:41:32 +0100 (Mo, 19. Jan 2009) $\r\n *\/\r\n\r\n\r\nTable of contents\r\n---------------------------\r\n\r\n * documentation\/\r\n The full documentation is available for download at http:\/\/www.yaml.de\/en\/. The documentation comes as a\r\n PDF file in German and English.\r\n\r\n * examples\/\r\n This folder contains several examples for the practical usage of the YAML framework.\r\n It's all there for your inspiration.\r\n\r\n * js\/\r\n This folder contains a small script for dumy texts as well as the JavaScript library jQuery.\r\n\r\n * tools\/\r\n This folder contains several tools for developing layouts. The files in this folder are not necessary \r\n for the framework's functionality and need not be placed on the live server.\r\n\r\n * yaml\/\r\n This folder contains all framework files. To use the framework, copy this folder onto your webserver.\r\n\r\n\r\nThe current version 3.1.x\r\n-------------------------\r\n\r\nA 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).\r\n\r\n<\/pre>\n
Elastic CSS Framework<\/h4>\n
Un tour rapide des navigateurs sans toucher l’Elastic<\/h4>\n
\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"\r\n\t"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\r\n<html>\r\n\t<head>\r\n\t\t<link rel="stylesheet" type="text\/css" media="all" href="reset.css" \/>\r\n\t\t<link rel="stylesheet" type="text\/css" media="all" href="base.css" \/>\r\n\t\t<link rel="stylesheet" type="text\/css" media="all" href="fonts.css" \/>\r\n\t\t<link rel="stylesheet" type="text\/css" media="all" href="class.css" \/>\r\n\t\t<link rel="stylesheet" type="text\/css" media="all" href="grid.css" \/>\r\n\t\t<link rel="stylesheet" type="text\/css" media="print" href="print.css" \/>\r\n\t\t<script src="jquery.js" type="text\/javascript" language="javascript" charset="utf-8"><\/script>\r\n\t\t<script src="engine.js" type="text\/javascript" language="javascript" charset="utf-8"><\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div class="unit three-columns">\r\n\t\t\t<div class="column">first column content<\/div>\r\n\t\t\t<div class="column">second column content<\/div>\r\n\t\t\t<div class="column">third column content<\/div>\r\n\t\t<\/div>\r\n\t<\/body>\r\n<\/html>\r\n<\/pre>\n
Mod\u00e8les d’Elastic<\/h4>\n
\n layout based on 1 column, layout based on 2 columns,... But i really really need more columns<\/code>
\nLes templates proc\u00e8dent par ce jeu de questions-r\u00e9ponses plut\u00f4t simple et efficace pour l’impl\u00e9mentation.<\/p>\nJquery to the rescue<\/h4>\n
jquery<\/code> pour vous permettre \u00e9ventuellement de passer de nouvelles valeurs \u00e0 la vol\u00e9e pour des resizes notamment.<\/p>\n\r\n<script type="text\/javascript" language="javascript" charset="utf-8">\r\n\t\/\/ direct call \r\n\tElastic.refresh();\r\n<\/script>\r\n<script type="text\/javascript" language="javascript" charset="utf-8">\r\n\t\/\/ jquery event invocation\r\n\t$(document).trigger('elastic');\r\n<\/script>\r\n<\/pre>\nUtiliser un framework CSS ou pas ?<\/h4>\n
Pour aller plus loin<\/h2>\n
\n
\n\t\tUn avis concis et int\u00e9ressant
\n\t\thttp:\/\/marcarea.com\/weblog\/?post\/2007\/09\/26\/Framework-CSS<\/a><\/li>\n
\n\tUne bonne liste des frameworks CSS disponible actuellement.
\n\t\thttp:\/\/www.w3avenue.com\/2009\/04\/29\/definitive-list-of-css-frameworks-pick-your-style\/<\/a><\/li>\n
\n\tUn des plus connus et utilis\u00e9s sur le Web actuellement
\n\t\thttp:\/\/blueprintcss.org\/<\/a><\/li>\n
\n\tAcronyme de “Yet Another Multicolumn Layout” (YAML)
\n\thttp:\/\/www.yaml.de\/en\/<\/a><\/li>\n
\n\t\tL\u00e0 encore un framework pour tenter le grand saut \u00e0… l’\u00e9lastique
\n\t\thttp:\/\/elasticss.com\/<\/a><\/li>\n
\n\tUn framework CSS fourni par Yahoo!
\n\thttp:\/\/developer.yahoo.com\/yui\/grids\/<\/a><\/li>\n<\/ul>\nVid\u00e9os<\/h2>\n
\nCSS – – Off The Hook<\/b>
\n<\/p>\n","protected":false},"excerpt":{"rendered":"