Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows, et, last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui en prennent pas les nouvelles API’s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d’origine.

217 ressources commentées

Autant vous prévenir tout de suite : cette liste n’est pas classée par catégorie, et ce, pour trois raisons simples : 1) vous pouvez rechercher les articles sur js4design.com où ils sont classés par catégorie et par tag, 2) vous pouvez utiliser l’équivalent-clavier Ctrl + F pour chercher un thème précis sur cette page, et 3)  je crois très fort en la sérendipité :-)

1. jQuip – Initiative lancée par Demis Bellot pour rendre jQuery modulable : 90% des fonctions les plus utilisées de jQuery pourraient se caser dans 13% de la taille actuelle du framework !
2. Popcorn.js – Framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Utilise les ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux.
3. Blueberry – Plugin jQuery expérimental et open source pour faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design).
4. Elastislide – Carousel jQuery réactif (Responsive Web design) pour que l’utilisateur profite au mieux des caractéristiques de son écran.
5. Decoding jQuery – Immersion (en anglais) dans le code source de jQuery avec des explications sur les fonctions extend(), isWindow(), parseXML(), globalEval() et toArray().
6. Codecademy – Apprendre les bases de la programmation Javascript de manière interactive et pro-active !
7. FlexSlider – Ce Slider permet de faire défiler du contenu avec le marquage HTML de votre choix, le tout utilisable au clavier.
8. jQuery Timelinr – Créer un effet de ligne temporelle verticale ou horizontale avec d’un côté, des dates et de l’autre, des événements.
9. spin.js – Afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3.
10. jQuery reversing –  Quelques astuces jQuery pour inverser l’ordre des éléments d’une liste UL ou OL dont le très concis snippet : ul = $('ul'); ul.children().each(function(i,li){ul.prepend(li)})
11. Require.js – Ce «loader» Javascript léger (5 kb gzipé), avec gestion de cache, accélère le chargement de vos pages lorsque vous utilisez de nombreux scripts.
12. Gmap3 – Plugin jQuery créé par Jean-Baptiste Demonte pour créer des cartes Google avec les fonctions avancées de la version 3 de l’API de Google Maps.
13. nanotabs — Version allégée du plugin jQuery idTabs. Script autonome (sans jQuery ou autre framework Javascript) pour faire des menus à onglets à partir de simples listes.
14. JbhSlider – Diaporama en jQuery gérant les évènements rapprochés (pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du Slider).
15. Agile Carousel – Faites défiler automatiquement ou manuellement du texte et des images. Le format de données JSON permettra à votre Slideshow de dialoguer avec les informations issues de votre CMS préféré.
16. Apprise – Dialoguer avec les utilisateurs autrement qu’à travers les boites modales alert() ou confirm() générées par le navigateur.
17. jQuery Simple Tooltip — Afficher des infobulles au survol d’un lien. Peut afficher le contenu d’une balise référencée par son identifiant.
18. jQuery Tagging Tools – Gérer les tags à la manière de Facebook, avec une petite croix pour supprimer les tags que l’on vient de saisir.
19. jQuery-Placeholder – Utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5.
20. jQuery SuperBox – Lightbox jQuery pour afficher des images, du contenu chargé en Ajax ou un fragment de la page via une ancre interne.
21. yepnope.js – Chargement conditionnel de scripts pour vos « Polyfills » pour charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le navigateur.
22. Full background image slider – Afficher un diaporama sur toute toute la fenêtre du navigateur (ou le container que vous voulez).
23. Minify – Script PHP5 pour combiner et minifier les fichiers CSS ou Javascript.
24. Treesaver – Framework Javascript pour faciliter la création de maquettes de sites web de type magazine qui s’adaptent automatiquement à une large variété de périphérique de sortie.
25. Coda Slider Effect – Tutoriel pour réaliser un système de navigation par onglets accessible avec effet de Slide, en mixant plusieurs plugins tels que scrollTo, localScrolletserialScroll.
26. jQuery File Upload – Uploader des fichiers multiples en affichant une barre de progression pendant le téléchargement ainsi qu’une miniature si votre fichier est une image.
27. jQuery radioSwitch – Transformer des boutons radio HTML en superbes Sliders d’un coup de magie CSS3 et Javascript.
28. jNotify – Afficher une boite de dialogue pour informer l’utilisateur du bon ou du mauvais déroulement des opérations.
29. jQuery Apple Effect – Afficher progressivement le contenu d’une page Web autour d’une zone affichée par défaut, pour la mettre en valeur.
30. jMenu – Système de menu horizontal en jQuery etjQuery UI qui autorise un nombre illimité de sous-menus.
31. Affichage des mots de passe à la demande – Afficher ou masque le mot de passe saisi dans un champs `input` de type password uniquement en cas de besoin, à l’aide d’une case à cocher.
32. qTip – Plugin jQuery pour créer des infobulles en affichant tout types de contenus : attribut title ou attribut personnalisé tooltip, ou une image.
33. markItUp! – Moteur de balisage léger qui transforme un textarea en éditeur HTML, Textile, Wiki, Markdown, BBcode ou votre propre système de balisage.
34. Slides – Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama.
35. Lightbox CSS avec tabindex et pseudo-classe :focus – Lightbox full CSS en remplaçant l’événement click par la pseudo-classe :focus et la propriététabindex pour permettre aux images d’avoir le «focus».
36. Lettering.js – Plugin jQuery pour contrôler précisément le découpage des textes afin d’afficher les caractères ou les mots qui les composent comme bon vous semble.
37. Simple Tabs w/ CSS & jQuery – Tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets.
38. SimpleTabs – Javascript autonome pour mettre facilement en place un système de navigation à base d’onglets (tabs).
39. CSS3-MediaQueries-JS – Bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2.
40. Marquee jQuery – Permet de faire défiler le contenu d’une liste vers le haut, le bas, la droite, la gauche grâce à des options bien pratiques.
41. Hyphenator – Script Javascript pour la gestion des césures sur tout ou partie de votre site Web, à réserver aux articles pour des questions de performances.
42. jQuery Cycle — Ce diaporama / Slideshow propose 6 effets de transition avec pas moins de 50 paramètres.
43. Galerie d’image avec jQuery – Ce tutoriel permet d’obtenir le résultat le plus simple possible visuellement tout en tenant compte l’accessibilité dans une démarche non intrusive.
44. JQuery Slide Effect – Tutoriel concis mais complet pour réaliser un effet d’animation de texte (slide) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.).
45. Easy Slider – Diaporama horizontal ou vertical avec navigation numérique qui propose un défilement doux lorsque l’on saute une ou plusieurs diapos.
46. innerShiv — Le contenu HTML5 généré par innerHTML fonctionne enfin dans IE.
47. CSS Text Wrapper – Habiller vos textes HTML avec n’importe quelle forme non-rectangulaire : courbe, zig-zag ou ce que vous voulez !
48. jCarousel – Contrôler le déplacement horizontal ou vertical d’une liste d’éléments avec ce Plugin jQuery.
49. Content Switcher – Ce Slider avec menu de navigation a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur.
50. EverCookie — API Javascript qui permet de créer un cookie résistant à tous les mauvais traitements grâce à une solution impliquant une dizaine de mécanismes différents : HTTP Cookies, Flash Cookies, Silverlight Isolated Storage , RGB values, Web History, HTTP ETags, Web cache, window.name, Internet Explorer userData Storage, HTML5 Session Storage, HTML5 Local Storage, HTML5 Global Storage, HTML5 Database Storage via SQLite !
51. bxCarousel – Carousel en jQuery qui boucle sur lui-même et qui fonctionne avec tout type d’éléments HTML contenus dans une liste.
52. TinyFader — Slideshow poids-plume avec effet de fading. C’est la version autonome deTinySlideren (TinyFader n’a pas besoin d’un framework Javascript).
53. Jquery Looped Slider – Diaporama jQuery qui boucle sans accroc lorsque le script atteint la dernière «diapo» de votre Slider.
54. Easy List Splitter – Plugin jQuery qui affiche des listes HTML ordonnées (OL) ou non-ordonnées (UL) en colonnes.
55. Nivo Slider – Diaporama qui offre 9 transitions de très bonne facture pour ajouter un peu de peps à nos Sliders images.
56. AviaSlider – Diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images.
57. Stop (Mis)Using Return False – Toutes les subtilités relatives à la gestion des événements dans jQuery.
58. Advanced Columns using the :nth-child(N) – Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery.
59. Jquery selected text sharer – Plugin jQuery astucieux qui affiche une div contenant une liste de liens avec les favicons associées une fois que l’utilisateur a sélectionné une portion de texte.
60. ChangeClass — Fonction Javascript pour changer de classe CSS à la volée.
61. CLEditor – Editeur HTML WYSIWYG de 10 ko à ajouter facilement à votre site Internet, compatible avec tous les navigateurs (IE6 inclus).
62. Sudo Slider – Plugin jQuery de 10 ko pour mettre en place un diaporama manuel (Slider) ou automatique (Slideshow) avec tout type de contenus (images, textes, vidéo en Flash, formulaire avec validation, etc.).
63. Enterprise jQuery — Passez du côté client ! Améliorer vos connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.
64. jQuery.eventManager — Améliorer la gestion d’événements avec jQuery.
65. Video JS — Player vidéo basé sur Javascript qui utilise la balise video de HTML5 lorsque le navigateur est compatible. Un fallback vers Flash est prévu pour les navigateurs ne prenant pas en charge HTML5.
66. 30 bouts de codes jQuery – en prêt-à-porter taillés dans les meilleurs tissus. Dans les rayons, vous trouverez de quoi habiller les longues soirées d’été.
67. Transformer un plugin jQuery en extension WordPress – Tutoriel permettant d’utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress.
68. Étendre la zone cliquable d’un lien à l’élément parent avec jQuery –Quelques lignes de code Jquery pour étendre la zone cliquable d’un lien à un élément parent, généralement un <div>.
69. jQuery Hotkeys Plugin – Ajouter ou supprimer des équivalents-clavier dans votre page Web. Gère la plupart des événements en une ligne de code.
70. Columnizer — Créer des colonnes avec jQuery. Nombreuses options, dont notamment la possibilité de spécifier une largeur de colonne ou un nombre fixe de colonnes.
71. jQuery Fundamentals — Manuel de survie pour jQuery. Synthétise les éléments de syntaxe de jQuery sur une page web. Sommaire précis et structuré avec un index des exemples utilisés.
72. Retina Display — Tutoriel pour refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur la version 4 de l’iPhone.
73. jqDock — Transformez une suite d’images en Dock Menu (set d’images qui s’agrandissent au passage de la souris) à la manière du dock de MacOS X.
74. Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow en autant de parties qu’ils contiennent de fieldset.
75. clueTip — Afficher des bulles d’aide complexes sur n’importe quel élément au survol de la souris (ou sur un clic, en option).
76. Smokescreen — Convertir des animations Flash simples en HTML5 et Javascript.
77. Lightbox_me — Lightbox jQuery d’un poids de 1 Kb pour afficher n’importe quel élément avec un effet Lightbox sobre et efficace.
78. jQuery-JSON — Convertir des données au format JSON via quatre nouvelles fonctions à l’object jQuery $ pour faciliter l’utilisation du format JSON.
79. SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.
80. Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
81. Griddy-Overlay – Afficher une grille par-dessus votre page web avec jQuery.
82. Scriptsrc — 10 Frameworks Javascript à emporter.
83. UI.Layout – Créer des interfaces utilisateurs avec jQuery.
84. WebProjectHelper — Générateur de structure MySQL et de classes PHP.
85. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
86. Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
87. Colorbox — une « lightbox » légère et extensible en jQuery.
88. jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
89. Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
90. Table des matières avec jQuery – Bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés.
91. Bloc de login à la Twitter avec jQuery – Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
92. jQuery.fn.sort — Trier des éléments avec jQuery.
93. Popeye 2.0 – Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
94. FAT-FREE — Framework PHP léger et modulaire.
95. jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
96. Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
97. Créer une arborescence de fichier avec jQuery – Série de 8 tutoriels sur la création d’une arborescence de fichier à l’aide de jQuery.
98. simpleCart (js) – Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
99. Modernizr — Détection des fonctionnalités CSS3 et HTML5.
100. 20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
101. IE7.js – Transformez une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8 : ce n’est pas de la magie, c’est de la technologie !
102. Webform to wizard – Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
103. DLink — Afficher le type de cible des liens avec Javascript.
104. Splash — un diaporama en pur Javascript.
105. Optimiser le chargement des AdSense – Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
106. Custom jQuery Selectors – Créez des sélecteurs personnalisés avec jQuery.
107. TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
108. Clickoutside Event — Détectez les clics en dehors d’un élément.
109. Comment, jQuery va tuer Flash ? – Question surprenante, mais force est de constater que Javascript a fait du chemin depuis window.open() !
110. jQuery Tutorials for Designers – 13 Tutoriels jQuery pour Webdesigners.
111. Starter — Générateur de plugins jQuery.
112. Effets lightbox sans framework — L’ouverture de nouvelles fenêtrespopup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS.
113. Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif.
114. jQuery SimpleTree Drag&Drop – Construisez des arborescences à la mode de Windows.
115. jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
116. Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
117. DataTables — Pagination et tri des données pour vos tableaux HTML.
118. jSocial – Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
119. jQuery Color Animation – Support du RGBa pour « jQuery Color Animations».
120. jQuery vs Mootools – Choisir jQuery ou Mootools en connaissance de cause.
121. 6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
122. Plupload – Gestionnaire de « téléversement » (upload) multiple en jQuery.
123. Parallax – Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
124. Uniform – Ajouter du look and feel aux rugueuses cases à cocher, aux boutons radio anémiques, sans oublier les spartiates. boutons Parcourir… des sobres formulaires HTML.
125. flot — Créez des graphiques avec jQuery.
126. jQuery Source Viewer – Naviguer à l’intérieur du code source de jQuery.
127. jQAPI — Documentation alternative pour jQuery 1.4.1.
128. How to Easily Create a JavaScript Framework – Créez votre framework Javascript en 4 parties.
129. css-template-layout – Implémentation jQuery du module CSS3 Template Layout.
130. jqTransform — Stylez vos formulaires avec jQuery et CSS.
131. Google Fade – Script disponible pour Mootools et jQuery pour reproduire chez vous l’effet introduit récemment par Google sur sa page. d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.
132. Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
133. Disable On Submit – Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
134. Adding Keyboard Navigation – Tutoriel sur la mise en place d’un diaporama avec utilisation du clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente.
135. Comment System with jQuery, Ajax and PHP – L’excellent Srinivas Tamada de9Lessons nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.
136. DOMAssistant – Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
137. Dynamic tabs using jQuery – Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
138. Sexy.js – Améliorer l’interface Ajax de jQuery.
139. jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
140. Page Peel Corner — Effet de page cornée avec jQuery.
141. A.P.E (Ajax Push Engine) — Le web en temps réel avec Ajax Push Engine.
142. Simple Image Viewer — Galerie d’image minimaliste.
143. jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
144. jsfiddle – Propose un environnement pour tester et partager du code Javascript.
145. jQuery 1.4 API Cheat Sheet – Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
146. jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
147. jQuery Quick Guide – Un guide pour avoir les fonctionnalités de jQuery sous la souris.
148. Animation avec quatre images et jQuery – Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
149. jQuery Masonsy – Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
150. 40 bouts de code – facilitez vos développements en Javascript ou jQuery.
151. jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
152. Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
153. CSS3 animations and their jQuery equivalents – 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
154. jTruncate – Plugin pour jQuery qui coupe un texte au bout d’un certain nombre de mots et qui ajoute un texte comme « Lire la suite » pour accéder à… la suite !
155. Hightcharts – Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
156. jQuery Before/After – Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
157. jQSlickWrap – Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
158. TinySlider – Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
159. Mootools Forge – Une forge pour les plugins Mootools.
160. Système de notation par étoiles accessible – Samuel Le Morvan propose un tutoriel complet sur la question.
161. Menu déroulant Suckerfish – Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
162. Smart Columns with CSS & jQuery – Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
163. Get viewport size with javascript – Connaitre la taille du « viewport » en Javascript.
164. Ceebox – Lightbox qui afficher n’importe quel contenu dans une fenêtre modale ou non. Idéale pour les vidéos hébergées sur Google Video, Dailymotion ou Youtube.
165. Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
166. Planet jQuery – Un planet pour jQuery.
167. The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
168. Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
169. maxWidthFixForIE6.js – Emuler la propriété max-width pour IE6.
170. iepngfix — Composant HTC qui gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6.
171. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevrepropose de faciliter l’utilisation d’Ajax.
172. jTextTranslate – Traduction de votre site en 87 langues par Google.
173. cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
174. balance_columns – Équilibrer des colonnes avec Javascript.
175. DOMTab – Menu à onglets simple et efficace.
176. FlashReplace – Insérer du Flash proprement.
177. DOMAssistant – Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
178. Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
179. jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
180. dLite — une librairie Javascript « petit mais costaud ».
181. Pikachoose – Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
182. jQuery Context Menu – Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
183. 22 menus déroulants passés au crible – Tyssen Design passe en revue les principauxdropdown menu.
184. Changement de design «on the fly» avec jQuery – Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
185. Simple jQuery Text Resizer – Laissez vos visiteurs choisiront la taille qui leur convient (uncookie gardera leur préférence en mémoire).
186. Des cookies à la mode de jQuery – Ecrire, lire et effacer vos cookies pour 4,15 kb.
187. Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
188. ul2finder — un explorateur à l’image du Finder de MacOS X.
189. jQuery Image Cropper — recadrer et uploader des images.
190. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
191. Le code CSS et Javascript au milieu du HTML c’est pas bien ! – Traduction de l’articleWhy Inline CSS And JavaScript Code Is Such A Bad Thing de Robert Nyman.
192. PHP.JS — transposer des fonctions PHP en Javascript.
193. jsbin — tester votre code Javascript et partagez vos bugs – Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
194. Un «slider» à la manière du Playback de Google Wave – tutoriel pour afficher un historique progressif à la manière de la fonction Playback de Google Wave.
195. Un diaporama avec AnythingSlider jQuery Plugin – Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
196. Google Closure — les mauvaises pratiques Javascript en action ? – Google Closure a été développé par des spécialiste de Java… ça craint.
197. Sélecteur de date (Date-Picker) non-intrusif – Sélecteur de date avec mini calendrier.
198. FireFinder — interagir avec la page web – Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
199. Choisir sa bibliothèque JS avec Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
200. Jquery Pagination System – Pagination côté client avec jQuery.
201. jQuery Flash Plugin – Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
202. jQuery UI Multiselect – Améliore l’apparence et l’ergonomie de la balise HTMLselect.
203. jQuery Tools – Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
204. Tipsy — des bulles d’aide façon Facebook avec jQuery – Bulles d’aide façon bande dessinée comme celles que l’on trouve sur Facebook ouTwitter.
205. Faire un Carrousel avec jQuery – Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
206. Lazy loader : chargement des images à la volée – Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
207. jQuery Magnifier Loupe – Zoom sur images avec l’attribut longdesc.
208. News déroulantes avec jQuery – Un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery.
209. Cufón : des polices de caractère pour tous – Implémenter font-face dans le plus grand nombre de navigateurs.
210. jQuery — renverser l’ordre d’une liste ordonnée – les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
211. jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
212. Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
213. Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
214. Augmenter la taille du texte avec jQuery – Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
215. Effets jQuery accessibles WAI-RIA – Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
216. eCSStender – Sélecteurs CSS avancés compatibles IE6.
217. jCarousel Lite – Galerie d’images en jQuery.

Pour trouver l’article correspondant sur Javascript & Webdesign, il suffit de saisir l’ancre du lien dans le champs de recherche. Cette liste sera mise à jour régulièrement, n’hésitez pas à revenir !

73 tutoriels : Slideshow, Sliders & Diaporama

Voici une liste condensée de tutoriels ou scripts jQuery commentés pour apprendre à faire défiler vos contenus textes et/ou image sous forme de Slideshow, de Sliders ou de diaporamas :

1. Create an Image Rotator with Description (CSS/jQuery) — Démo
2. Sliding Boxes and Captions with jQuery — Démo
3. Animate Panning Slideshow with jQuery — Démo
4. Create Beautiful jQuery Slider Tutorial — Démo
5. Create a Fancy Image Gallery with JQuery
6. jQuery Infinite Carousel
7. Coda Slider Effect
8. Create Featured Content Slider Using jQuery UI
9. Making a Content Slider with jQuery UI
10. Creating a Slick Auto-Playing Featured Content Slider
11. Start/Stop Slider
12. ImageSwitch
13. Create Content Slider using jFlow, A Minimalist jQuery Plugin
14. jQuery Looped Slider Tutorial
15. Build a Content Slider with jQuery
16. CSS and jQuery-Crating an Image Slider
17. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
18. Making a Mosaic Slideshow With jQuery & CSS
19. Making A Slick Content Slider
20. Galleria
21. Easy Slider
22. Galleriffic
23. AD Gallery
24. Sliding Boxes and Captions
25. jQuery Virtual Tour
26. jQuery MB Gallery
27. AnythingSlider
28. GalleryView
29. jCarousel – jCarousel — un Carousel jQuery très complet
30. Easiest Tooltip and Image Preview
31. ThickBox
32. SpaceGallery
33. s3Slider
34. Simple Controls Gallery
35. Pikachoose – Pikachoose : le bon choix pour afficher vos images
36. jQuery Popeye – jQuery Popeye 2.0 — Une Lightbox inline
37. Supersized
38. imgBox
39. Pirobox
40. jQZoom
41. jQuery Superbox
42. jQuery Infinite Carousel
43. Simple jQuery Image Slide Show with Semi-Transparent Caption
44. Moving Boxes
45. LightBox
46. SliderGallery
47. FeaturedContent
48. InnerFade
49. jQuery Morphing Gallery
50. A Simple jQuery Slideshow
51. Create a Slick and Accessible Slideshow Using jQuery
52. Building a jQuery Image Scroller
53. Sliding Boxes and Captions with jQuery
54. Creating an Image Slider
55. Create Beautiful jQuery slider tutorial
56. Simple JQuery Image Slide Show with Semi-Transparent Caption
57. Create a Simple Image Slide Show using jQuery
58. Slide and hide section with jquery
59. Making a Slideshow with jQuery
60. jQuery – Creating a Slideshow
61. Simple jQuery slideshows
62. Creating a Slick Auto-Playing Featured Content Slider
63. How to add Slideshow to jQuery lightbox plugin
64. jQuery Slideshow Explained
65. Supersized jQuery Plugin
66. The Easiest jQuery Plugin For Sliding Images and Content
67. GalleryView: A jQuery Content Gallery Plugin
68. Image Flow
69. S3Slider jQuery plugin
70. EOGallery
71. Smooth Div Scroll
72. jQuery virtual tour
73. Supersized – Full Screen Background/Slideshow jQuery Plugin

100+ Polyfills et Fallbacks pour HTML5

L’article 100+ Polyfills et Fallbacks pour HTML5 présente une collection de plus de 100 bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Cette liste étant mise à jour régulièrement, elle ne figure pas sur cette page. Elle est accessible directement à l’adresse HTML5-Cross-Browser-Polyfills.

Voilà, c’est fini !

J’espère que cette longue liste n’aura pas été trop indigeste et qu’elle vous sera aussi utile qu’à moi. N’hésitez pas à me signaler si votre script préféré manque à l’appel ou si le lien vers le script de vos rêves mène à une impasse.

Articles sur le même sujet

• 100+ Polyfills et Fallbacks pour HTML5
• WordPress de A à Z — E comme Extensions (les plugins)
• 139 ressources Javascript et jQuery
• Menu à onglets (tabs) — idTabs ou domTab ?
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek

Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire. 

La question du «pourquoi tel élément plutôt qu’un autre ?», rejoint un peu la question posée par Leibniz : «pourquoi y a-t-il quelque chose plutôt que rien dans l’univers ?». A laquelle je ne peux m’empêcher d’ajouter mon grain de sel sous forme de question subsidiaire : «pourquoi tel élément de «design» plutôt qu’un autre ?»

Direction artistique & Web design

Le Directeur artistique détermine le fond du message ; le graphiste s’occupe de la (mise en) forme. Le DA met sa connaissance des codes artistiques des temps passés, présents et futurs pour proposer un univers graphique sans se soucier des contraintes techniques. Quant au graphiste, il rend en quelque sorte «utilisable» le travail du DA en fonction du support et des techniques dont il dispose.

Chacun d’eux porte son attention sur une partie différente des bonnes pratiques liées à son métier. Le DA s’assure que les codes graphiques qu’il a retenus sont adaptés à la marque et à son public. Le graphiste veille à ce que la mise en oeuvre des choix graphiques respecte à son tour les attentes de la marque et du public.

En pratique, le DA évitera généralement de proposer des couleurs vives pour un site web vendant des articles funéraires et que le graphiste s’abstiendra de placer le logo et le champs de recherche en bas de la page. Si ces cas extrêmes sont généralement évités, il n’en reste pas moins qu’il n’est pas toujours évident de choisir entre des coins arrondis ou des angles droits, des dégradés ou des aplats de couleurs, du Stars and Stripes ou du Sex and Sun !

Finalement, la question que je me pose est la suivante : «quand et pourquoi se décide-t-on pour un coin arrondi ou pour un coin carré ?». Cette question est valable pour tout élément ayant un impact sur l’apparence d’une page web. Pour éviter de faire ces choix parfois cornéliens sur un coup de poker, voici quelques éléments de réflexion que j’ai rassemblé ici parce que vous le valez bien :-)

En-tête, bannière et pied de page

Header

Les en-têtes de blogs plus ou moins délirants ont eu leur heure de gloire, mais ont fini par lasser. Ils sont souvent composés d’une image bariolée occupant la largeur du site ou d’une image centrée dans le background débordant largement de la largeur du contenu. On peut voir la première technique dans le thème par défaut de WordPress 3. La deuxième a été popularisée par des sites comme celui de Matt Mullenweg ou Web Designer Wall.

Un bon gros header

Footer

Les pieds de page sont souvent les laissés pour compte du webdesign. Toutefois, la mode des Big Footer leur a redonné une certaine importance, même si au départ, il s’agit surtout d’améliorer le maillage interne en mettant un paquet de liens. Pour faire passer la pilule, les plus créatifs ont utilisé cette zone, peu sexy en général, pour en faire quasiment la vitrine de leur site web. Voici quelques conseils pour optimiser votre Fat Footer (explications en français).

Exemple de big footer simple et graphique à la fois

Big Footer de Soh Tanaka

Colonnes et barres latérales

Il est assez rare de rencontrer un blog ou un site web composé d’une seule colonne. Tout au plus trouve-t-on des thèmes WordPress affichant l’article seul sans les barres latérales. Jusqu’en 2003 environ, les sites web étaient souvent composés d’une zone de contenu entourée de deux barres latérales. Dans celle de droite, on trouvait généralement le champs de recherche et les liens annexes, tandis que la colonne de gauche accueillait la publicités, des listes de liens extérieurs (blogroll), etc.

Les frameworks CSS permettent de créer une système de colonne pour votre site web

The Grid Simpler : une grille simple et souple

Aujourd’hui, la tendance est clairement à une composition en deux colonnes : le contenu à gauche et la barre latérale à droite. Lorsqu’on a besoin d’une deuxième sidebar, elle est souvent située à côté de la première, avec la même largeur, mais pas forcément. L’idée maitresse est de créer une asymétrie graphique. Par ailleurs, la friction monétaire étant ce qu’elle est, cette organisation permet de mettre en avant le contenu pour les moteurs de recherche qui digèrent le code HTML de haut en bas et de gauche à droite (c’est peut-être différent pour les langues qui se lisent de droite à gauche).

Contours et angles

Arrondir les angles ou pas ?

Le modèle de boite du W3C reposant sur des angles droits, l’utilisation des coins arrondis a permis à une époque de sortir du lot. De fait, ils sont utilisés depuis longtemps malgré de nombreux obstacles techniques. L’arrivée de CSS3 et de border-radius, qui rendent accessibles les coins arrondis au plus grand nombre, remettront peut-être les angles droits ou irréguliers à l’honneur.

Cela dit, l’origine de l’engouement pour les bords arrondis est à chercher du côté symbolique. L’arrondi est une forme organique qui donne une impression de proximité affective. Il a un pouvoir immersif qui s’adresse au cerveau droit et joue sur l’émotionnel. A l’opposé, le coin carré s’adresse plutôt à la raison, à l’intellect.

L’arrivé de border-image avec CSS3 devrait élargir les possibilités créatives, en se rapprochant de ce que l’on trouve dans Illustrator, par exemple.

Rubans (ribbons)

Ils ont pratiquement toujours existés et le web ne cesse d’inventer de nouvelles formes dont le but est d’ancrer le ruban dans la page tout en le faisant ressortir. Force est de constater que les derniers rubans à la mode en provenance du monde anglo-saxon (oui, le jour où les graphistes francophones cesseront de se croire le nombril du monde…) réussissent ce tour de force.

Ombres portées

Elles ont toujours fait partie du paysage graphique autant en PAO et sont apparues sur le web dès que cela a été possible. D’abord en utilisant des cellules de tableau, puis avec des balises div imbriquées et enfin, depuis peu, avec les propriétés CSS3 box-shadows et text-shadows.

Bords déchirés

On voit relativement peu de contours déchirés ou de bords irréguliers, malgré leur fort potentiel graphique.

backgrounds

Fond blanc

Associé à du texte (presque) noir, le fond blanc présente le meilleur rapport de contraste que l’oeil puisse trouver. Il s’agit généralement de la couleur de fond de page par défaut des agents utilisateurs depuis plusieurs années. C’est une valeur sûre qui ne devrait être modifiée qu’après mûre réflexion ;-)

Aplat de couleur

L’utilisation des aplats de couleur permet de faire ressortir une partie du texte tout en lui conférant une certaine puissance. Si en peinture, l’obtention d’un à-plat digne de ce nom n’est pas une sinécure, il n’en va pas de même pour la PAO ou le web où il suffit de saisir une valeur pour obtenir en beau «noir au blanc». Les sites web des années 2000 faisaient un large usage des aplats, tandis qu’aujourd’hui leur emploi est réservé à des petites portions de texte, comme des titres ou des encarts. Il peuvent être utilisés pour signaler les hors-textes en lieu et place des guillemets géants qui commencent à lasser un peu (mais c’est joli quand même).

Dégradés

Si les aplats de couleur sont roboratifs, les dégradés se digèrent plus facilement. Toutefois, ils restent peu utilisés sur le web à part dans les backgrounds en haut de page pour ancrer l’en-tête du site dans la fenêtre du navigateur. Ils devraient trouver une seconde jeunesse grâce à la nouvelle propriété gradient apparut avec CSS3. Attention à l’overdose : ces effets sont à utiliser avec parcimonie.

Zébrures (Stripes)

Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude).

Tartan

Le tartan est une autre manière de remplir un fond sans agresser l’oeil. Peu employé, il pourrait reprendre du poil de la bête. Voici un générateur de tartan au cas où vous voudriez prendre de l’avance.

Images

les visuels «Full Background» sont généralement à éviter, mais si votre produit ou votre thématique nécessite une immersion du visiteur dans votre univers, foncez ! L’essentiel est de garder un oeil sur la lisibilité d’ensemble. C’est certainement très subjectif, mais je trouve que les sites utilisant des images généreuses sur un fond noir avec du texte clair s’en sortent mieux que ceux qui utilisent des grandes images sur un fond blanc avec du texte noir ^^

Background « bruité »

Ces backgrounds utilisant généralement la fonction Filtre > ajout de bruit de Photoshop remplacent avantageusement les dégradés lorsqu’il s’agit de donner un peut de matière et de profondeur à la page.  Avec l’option bruit gaussien, les raccords entre plusieurs fond bruités sont un jeu d’enfant.

Fonds artistiques

Parmi les fonds plus ou moins artistiques — qui sont de plus en plus utilisés –, j’aime beaucoup celui de All For Design qui parvient à conserver un bon niveau de lisibilité malgré le faible contraste entre la couleur du fond et le texte.

C’est tout pour le moment

Cet article devrait trouver une suite avec quelques notes sur l’utilisation des textes, des illustrations, des palettes de couleurs, etc. N’hésitez pas à partager vos impressions ou à fournir toute information complémentaire susceptible de faire avancer le «schmilblick» :-)

Articles sur le même sujet

• Quelques notes sur le design graphique des sites web et autres futilités
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Trucs et astuces CSS
• 390 ressources Javascript & jQuery
• Un site Web n’a pas forcément besoin de graphismes

Après mes petits journaux permanents consacrés à la typographie et à HTML5, voici un numéro spécial qui fait la part belle à CSS3. Ces nouvelles propriétés proposent des effets graphiques ou typographiques à votre page Web, mais pas seulement : CSS3, ce sont aussi des sélecteurs et des pseudo-classes qui vont nous faciliter l’intégration et nous permettre de repousser encore plus loin les frontières de l’univers et au-delà ! En attendant, voici des générateurs de code CSS3 en ligne classés par propriétés ; des ressources pour vérifier la compatibilité des navigateurs et quelques liens pour faire entrer dans le rang les plus récalcitrants ; des tutoriels et des exemples de tests et d’expérimentations diverses avec CSS3 qui devraient vous inspirer. Ce guide permanent sur CSS3 contient plus d’une centaine de liens, pour commencer.

Générateurs de CSS3

Multi-propriétés

• CSS 3.0 Maker — Très bel outil pour générer les propriétés CSS3 Border Radius, CSS Transform, Box Shadow, Text Shadow, Text Rotation, RGBA, Font Face, Outline Offset, Transitions et CSS Gradient. Les nombreuses options sont accessibles par le biais de curseurs ou de boutons radio. La compatibilité avec les navigateurs est matérialisée par des icônes généreuses représentant les navigateurs concernés, qu’il s’agisse des navigateurs de bureau ou mobile. Le code est facilement copiable ou téléchargeable sous la forme d’un .zip. La prévisualisation des effets est très réussie, notamment en ce qui concerne les animations CSS.
• CSS3 Generator — Un des meilleurs générateurs de CSS3 tant par le nombre de propriétés prises en compte que par la fluidité de l’interface. Au menu : Border Radius, Box Shadow, Text Shadow, RGBA, Font Face, Multiple Columns, Box Resize, Box Sizing, Outline, Transitions, Transform. Selectors et Gradients renvoient respectivement aux liens CSS3 Selectors Explained et Ultimate CSS Gradient Generator.
• CSS3, Please! — Ce générateur de CSS3 multi-navigateurs prend la forme d’une page Web que l’on peut copier-coller telle quelle tout en pouvant modifier les valeurs soulignés qui se répercutent automatiquement sur l’ensemble de la déclaration concernée : coins arrondis, ombres portées sur les bloc et les textes, dégradés, RGBA, Rotation, Transitions et Font Face. Propose les propriétés spécifiques à Internet Explorer (filter et -ms-filter) pour les dégradés, la transparence RGB, la rotation des blocs et les polices de caractères.
• CSS3 Sandbox : Gradients, CSS Transforms, Shadows, CSS Text Stroke — Parmi les nombreux outils et les ressources pour les professionnels du Web proposés par Western Civilisation, on trouve des outils pour faire du CSS3 comme Jourdain faisait de la prose !  Toutes les opérations s’effectuent à l’aide de curseurs et de sélecteurs de couleurs (Color Pickers). Les modifications se répercutent automatiquement dans le code qu’il suffit de copier lorsque vous avez terminé.
• CSS3 Click Chart — Cette page fait plutôt office de pense-bête pour les principales propriétés CSS3 : exemple d’utilisation, informations et code.
• CSS3 Generator — Interface très agréable pour prévisualiser les propriétés border-radius, box-shadow, background-gradient et opacity. Le générateur de code propose le support de IE7 & IE8.
• CSS3.Me — Encore un générateur de propriétés CSS3 pour se simplifier la vie avec : border-radius, box-shadow, background-gradient et opacity. Fix pour IE7 et IE8.
• CSS Prefixer — Ecrivez vos déclarations CSS3 et demandez les préfixes vendeurs, c’est aussi simple que ça !

Dégradés (Gradients)

• Générateur de dégradés CSS — Propose un nombre illimité de couleurs pour vos dégradés CSS3, quatre directions, une prévisualisation en direct, des options pour les anciens navigateurs et une compatibilité étendue pour IE et Opera pour utiliser les dégradés obliques sous Opera 9.5+ (en utilisant un fond SVG) et activer les filtres de dégradés sous IE. Propose une table de compatibilité des options des dégradés pour IE 5.5 — 8, Firefox < 3.6 et 3.6+, Google Chrome < 4  et 4, Safari < 4 et 4, Opera < 9.5 et 9.5+.
• Ultimate CSS Gradient Generator — Editeur de dégradés pour générer les déclarations CSS3 à travers des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Lire Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator.
• CSS3 Gradient Generator — Sélectionnez la direction de votre dégradé, le format HEX ou RGB, les couleurs de votre choix : lorsque l’exemple dynamique vous plait, copiez le code mis à jour à la volée.
• Quick 3-Color CSS3 Gradient Generator — Lorsque vous avez choisi vos trois couleurs, vous pouvez copier un des trois bouts de code en fonction de la direction que vous voulez pour votre dégradé : Top to Bottom, Left to Right ou Radial.
• CSS3 Gradient Button Generator — Cet outil est conçu en Flash par esprit de conciliation entre les deux mondes que sont devenus le développement HTML5/CSs3/Javascript et Flash. L’interface est spartiate, mais complète. L’outil propose la gestion des état `:hover` et `:active`, ce qui être très pratique pour créer des boutons.
• CSS3 Gradients — Le point sur les dégradés CSS3 introduit en 2008 par le moteur de rendu Webkit.
• CSS3 Patterns Gallery — Collection de backgrounds composés de motifs éditables réalisés principalement avec les propriétés de création de dégradés.

Coins arrondis

• Border Radius — Ce générateur de coins arrondis permet de choisir un rayon d’arrondi différent pour chaque angle ou identique pour tous. Il affiche directement la règle CSS avec les propriétés CSS3 pour WebKit et Gecko, en plus du format spécificié par le W3C, bien évidemment.
• CSS3 Rounded Corner Generator — Choisissez le rayon de vos arrondis à l’aide de curseurs intuitifs. Possibilité de saisir également la couleur de fond pour le bloc, la largeur et la couleur de la bordure.
• CSS Corners — Permet de spécifier l’arrondi, le dégradé et le padding pour votre bloc.

Border Image

• Border Image Generator — Cette propriété fait partie des plus prometteuses pour les intégrateurs Web voulant utiliser des images pour avoir de belles bordures personnalisées. Avec Border Image Generator, il suffit de charger une image depuis votre poste de travail et de faire glisser les quatre curseurs pour déterminer la part de chaque côté qui apparaitra dans les bordures (Top, Right, Bottom, Left). Il est possible de jouer sur la taille et la répétition verticale ou horizontale des portions de l’image. Le code source de Border Image Generator est disponible sur github.

Boutons

Les bords arrondis, les ombres portées et les dégradés sont de bons candidats pour donner à certains liens l’apparence de boutons de type Call to Action. Voici quelques générateurs qui vous permettront de les paramétrer «vite fait, bien fait».

• CSS3 Button Generator — Plusieurs paramètres sont pris en compte : le texte (famille, couleur, taille, ombre) ; le bloc (ombre, padding) ; la bordure (coin arrondi, couleur, style, largeur) ; le fond (dégradé, couleur de départ, couleur de fin) ; et l’état :hover du bouton. CSS3 Button Generator Propose d’ajouter les styles spécifiques à Internet Explorer pour l’affichage des dégradés.
• Button Maker — Trois curseurs permettent respectivement de régler le padding, la taille du texte et le rayon de l’arrondi du bloc. Sept sélecteurs de couleur proposent la gestion des couleurs du dégradé : Top Gradient Color, Bottom Gradient Color, Top Border Color, Hover Background Color, Text Color, Hover Text Color et Active Background Color.
• We Love Buttons — Set de boutons réalisés en CSS3 avec une feuille de style CSS prête à l’emploi.

Colonnes

• Générateur de multi-colonnes en CSS3 — La répartition d’un pavé de texte en plusieurs colonnes qui est une pratique courante dans la presse est désormais à la portée de tous ! Spécifiez le nombre de colonnes et l’espace qui les sépare, la présence ou non d’un séparateur de colonnes, sa largeur, et son style.

Font-face

• @Font-Face Kit Generator — Des polices de caractères de qualité à télécharger. Des kits font-face prêts à être intégrés dans votre site et font-face Generator pour utiliser les polices installées sur votre poste de travail.
• Google Font Directory — Des polices de caractères à inclure dans votre page web grâce à Google Font API.
• Google Font Previewer for Chrome — Testez les fontes directement sur la page affichée dans votre navigateur avec cette extension pour Google Chrome, puis copiez-collez le code fourni.
• Compare web fonts — Comparez simultanément plusieurs dizaines de polices de caractères en provenance de Google Font Directory et Typekit.
• Typekit — Lire Typekit — la typographie sur le web
• Webfonts (fonts.com) – Solution similaire à Typekit avec une version gratuite après inscription.
• sIFR — Lire sIFR 2.0: Rich Accessible Typography for the Masses
• Facelift — Lire Une alternative à sIFR : Facelift Image Replacement
• Typeface — Lire typeface.js — typo personnalisée avec Perl et Javascript (sans Flash ni image)
• cufon — Lire Cufon, nouvelle alternative pour intégrer des polices TrueType et OpenType au web
• Typechart — visualisez des polices de caractères (une petite dizaine) dans différentes configurations de taille, d’interlignage, de style, de graisse, d’interlettrage, en lettres majuscules ou minuscules et de copier les propriétés CSS associées.
• Font Dragr — Glissez-déposez vos polices de caractères pour les voir s’afficher dans la page.
• Allez plus loin avec Le petit journal permanent de la TypOgrApHiE !

Media Queries

• CSS3 Media Queries — Spécifications du W3C concernant le module Media Queries permettant d’adapter une page web selon les critères techniques ou les pré-requis des agents utilisateurs comme la largeur, la hauteur, l’orientation, la couleur, la résolution, etc.
• Les Media Queries CSS3 — Article de fond en français expliquant Media Queries.

Transformation & rotation

• CSS WARP — Ce générateur CSS3 permet d’afficher du texte le long d’un tracé vectoriel irrégulier avec un système de points d’ancrage pour à la manière d’Illustrator et de son outil Plume.

CSS3 Cross Browser ?

Les possibilités graphiques chatoyantes offertes par CSS3 ne sont pas disponibles dans tous les navigateurs. Seuls les plus récents ont commencé à les implémenter via un préfixe «vendeur» (lire Vendor-prefixed CSS Property Overview). Pour s’en sortir, il est utile de connaitre les propriétés CSS prises en charge par les navigateurs que vous avez décidé de «supporter» dans le cadre de votre intégration, qu’il s’agisse de privilégier la «dégradation gracieuse» ou «l’amélioration progressive», en mettant en place une solution Javascript ou un composant HTC pour émuler les propriétés CSS3 qui manquent à l’appel.

Vérifiez la compatibilité avec les navigateurs

• CSS3 Selectors Test — Teste une quarantaine de sélecteurs CSS3 et précise leur prise en charge par votre navigateur. Un lien vers le sélecteur affiche un exemple d’utilisation avec le code HTML associé.
• HTML5 & CSS3 readyness — Votre navigateur est-il prêt pour CSS3 et HTML5 ?
• When can I use… — Cette table de compatibilité permet de s’assurer que les navigateurs ciblés prennent en charge HTML5, CSS3, SVG, etc.
• Web Browser Standards Support — Table de compatibilité très complète sur la prise en charge des propriétés et sélecteurs CSS 2.1 et CSS 3. A garder sous la souris !
• CSS Compatibility and Internet Explorer — Le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer, par MSDN (réseau Microsoft pour développeurs).
• HTML5 & CSS3 Support — Tableau de compatibilité inter-navigateurs pour CSS3 et HTML5.
• CSS3 learning tool et Webkit CSS3 Generator sont deux outils interactifs plutôt basiques permettant de voir dans le navigateur les propriété est prise en charge.

Assurez (un peu) la compatibilité

• CSS3PIE (Progressive Internet Explorer) — Composant HTC permettant à Internet Explorer (IE6 — IE8) de «rendre» quelques propriétés CSS3 (border-radius, box-shadow, linear-gradient).
• IE-CSS3 — Fournit à Internet Explorer la prise en charge de quelques propriétés du nouveau standard CSS3.
• Transformie — Plugin jQuery permettant d’utiliser les transitions CSS dans IE via les filtres natifs d’Internet Explorer
• ecsstender –Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.
• Modernizr — Ajoute des classes à l’élément <html> pour cibler les fonctions disponibles dans un navigateur spécifique. Pratique pour prévoir une dégradation gracieuse ou une amélioration progressive en fonction de vos contraintes d’intégration.
• Selectivizr — Cette ressource Javascript rend disponible les différents sélecteurs et pseudo-classe CSS3 sur IE6 — IE8. Fonctionne avec de nombreuses bibliothèques JS comme jQuery, prototype, Mootools ou DoJo.
• DD_Roundies — Petite bibliothèque Javascript permettant d’afficher des coins arrondis dans Internet Explorer via VML. Fonctionne plus ou moins bien dans IE6 — IE8. Il est possible de cibler uniquement Internet Explorer ou de forcer les propriétés `-moz-border-radius`, `-webkit-border-radius`, et `border-radius` dans les navigateurs compatibles.

Tutoriels

• Creating a CSS3 Generator – Tutoriel pour créer votre propre générateur de propriétés CSS3 (limité aux navigateurs sous Webkit) à l’aide d’une pincée de CSS3, d’HTML5 et de jQuery !
• CSS3 Border Images for Beautiful, Flexible Boxes
• How to Create Social Media Buttons Using CSS3
• Cross Browser CSS Transforms – even in IE
• A CSS3 Overlay System — Démo

Exemples CSS3

• CSS3D — Effet 3D stéréoscopique avec CSS3. Voir la démo. Profitez-en pour admirer les nombreuses expérimentations CSS3 de Simurai dans le domaine de la typographie, notamment.
• Making an image gallery with :target — Voir la démo. Autre exemple avec :target par Daniel Glazman.
• CSS Transforms Font-face Experiment – Voir la démo.
• CSS3 Background Clip Font-face – Voir la démo.
• CSS3 Transform Experiment – Voir la démo.
• Create a Vibrant Digital Poster Design with CSS3 — Voir la démo.
• Elegant Dark CSS3 Menu Template
• CSS Typography Experiment
• Pure CSS(3) accordion — Voir la démo.
• :toggle — This is a CSS3 toggle-button that works without JavaScript. Nothing special, just a cheap trick. Fiddle yourself.

Expérimentations CSS3

• http://playground.deaxon.com/css

  Ce terrain de jeu mis à disposition par Benjamin De Cock permet de voir qu’il est possible de se passer de Javascript pour réaliser une foultitude des effets que l’on trouve sur le Web :
  • Clickable accordion
  • Animated nav
  • Animated text background
  • Image-free bouncing tooltip
  • Circle zoom
  • Flexible nav
  • Float centering
  • Image gallery
  • Image-free gradient overflow
  • HTTP headers stylesheet
  • Lightbox
  • Multi-column layout
  • Image-free Safari window
  • Slideshow
  • Vertical sliding nav
  • Image-free spinner
  • Tabs
  • Text switch

• html5rocks (Playground)

  A la manière d’un JSFiddle consacré à CSS3, amusez-vous avec les nouvelles API’s Javascript, HTML et CSS proposées par le W3C dans ce bac à sable réalisé par Google. Jetez également un oeil sur les présentations et tutoriels consacrés à HTML5.
  • Multicolumn Layout
  • Rounded Corners
  • Web Fonts
  • Text Wrapping
  • Text Stroke
  • Transitions
  • 2d Transforms
  • Animations
  • Gradients
  • Selectors

• IE7 No More

  Last but not least, voici les tests et expérimentations CSS 2.1 et CSS3 de Raphaël Goetter qui a pris soin de vérifier comment Internet Explorer se comportait devant les standards du Web. IE7 serait-il le nouveau IE6 ?
  • Movable flexible boxes with CSS2 table-cell
  • Tab Navigation menus without images
  • Animated dropdown (clic) menu in HTML5 / CSS3
  • Animated dropdown (hover) menu in HTML5 / CSS3
  • Slideshow image gallery in CSS3
  • Scrolling image gallery in CSS3
  • A todolist with HTML LocalStorage
  • Playing with Media Queries
  • Playing with CSS3
  • Icon and images with Data URI
  • Word wrapping with CSS3
  • Using CSS3 :lang selector

Galerie CSS3

• CSS3 Watch — Collection d’exemples d’utilisation créative, innovante ou inatendue de CSS3.
• CSS3 Gallery – Showcase de designs de sites réalisés avec CSS.

Miscellanées

• Arrêtez de me casser les gonades avec border-radius.

Linkographie

• Stop Forking with CSS3
• http://www.bertrandkeller.info/css-html/
• http://www.alsacreations.com/astuce/lire/1076-utiliser-css3-aujourdhui-outils-ressources.html
• http://realworldcss3.com/resources/
• http://www.icanbecreative.com/awesome-css3-typography-experiments-to-impress-your-friends.html
• http://stylishwebdesigner.com/70-must-see-css3-tips-tricks-and-tutorials/

Ce guide sur CSS3 est en évolution constante et s’agrandit en fonction des découvertes et de vos suggestions. N’hésitez pas à vous manifester et à proposer vos liens et vos ressources CSS3 préférés.

Articles sur le même sujet

• CSS3 pour les web designers : voyez grand, codez petit !
• Générateur de coins arrondis avec border-radius
• Le petit journal du web #2 — Coins arrondis ombrés, capture d’écran dans Chrome, CSS3 et autres liens
• 390 ressources Javascript & jQuery
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre un autre exemple d’application de ce concept de grille modulaire dont la particularité est que la colonne de base est égale à la largeur de la gouttière.

← Précédemment dans css 4 design…

Avec les blancs tournants, la gouttière est un élément essentiel qui participe à l’équilibre d’une mise en page en colonnes. Elle fait office de contre-poinçon, de contre-forme pour le contenu,  et facilite la lecture et la recherche d’information, en plus de donner du rythme. C’est pourquoi, il me semble important que la largeur de cette gouttière ne soit pas simplement le modulo des calculs savants  qui ont servis à déterminer le nombre et la largeur des colonnes.

J’ai donc choisi d’associer la largeur de la gouttière à la hauteur de l’interligne et à la largeur d’une colonne de base pour obtenir une grille composée de carrés de 21 x 21 pixels (mais on peut choisir un autre interlignage sous réserve qu’il corresponde aux critères de lisibilité selon la taille des caractères). Ces modules serviront de matrice pour déterminer toute une multitude de colonnages. Dans l’article cité plus haut, j’obtient pas moins de 13 grilles différentes permettant des regroupements de colonnes divers et variés.

Mise en page pour mobiles

Le Web est multiple et son accès s’effectue dans des conditions qui échappent aux concepteurs de sites. Le Web mobile a le vent en poupe et cela n’est pas prêt de s’arrêter. Voici donc une adaptation de ma grille modulaire pour ces nouveaux périphériques dont la particularité est d’avoir des petits écrans.

Plusieurs exemples de grilles pour les formats les plus courants en matière de périphérique mobile ou tactile.

Pour les besoins de l’exemple, j’ai choisi un interlignage de 20 pixels qui donne des comptes ronds vu que les résolutions sont des multiples de 10. Au cas où, voici les étapes à suivre dans Illustrator :

1. Créer un document au format 320 x480,
2. Faites glissez l’angle supérieur droit situé à l’intersection des règles (Ctrl + R) verticales et horizontales jusqu’au bord supérieur gauche du document pour définir les coordonnées x et y le cas échéant,
3. Sélectionnez l’Outil Trait (T), cliquez et précisez la longueur (320 px),
4. Ajustez le placement du trait aux coordonnées  x : 0 px et y : 0 px,
5. Choisisez une couleur de contour (#cccccc) et une épaisseur (0.5 pt),
6. Copiez ce trait  vers le bas : Ctrl + Maj + M (Horizontale : 0, Verticale : -20 px, Distance : 20 px et Angle : -90) et cliquez sur Copier,
7. Dupliquez-le avec Ctrl + D autant de fois que nécessaire.

Voici une grille vite fait bien faite pour l’iPhone. Cliquez sur l’image pour voir l’animation ;)

Pour les colonnes, les étapes ressemblent à la duplication des colonnes, à ceci près qu’il faut choisir l’Outil Rectangle (M) et spécifier une largeur de 20 pixels et une hauteur de 480 pixels. Dupliquez cette première colonne 7 fois, sélectionnez-les toutes et déplacez-les de 10 pixels vers la droite de manière à laisser des marges correctes de part et d’autre. Choisissez les couleurs qui vous conviennent et voilà !

Le bonheur est dans la gouttière

La largeur de la gouttière est donc un bon point de départ pour créer un gabarit de mise en page pour le Web. Ce qui m’amène à faire une proposition simple : plus que la gouttière ou tout autre élément, c’est la largeur totale de l’empagement qui doit servir de variable d’ajustement.

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Quelques liens sur les Media Queries en CSS3
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• 36 frameworks CSS — Mettez une grille dans votre design
• 390 ressources Javascript & jQuery

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé).

Pour déterminer le pas d’une grille de mise en page pour le Web, on recherche souvent le meilleur rapport entre une largeur optimale (entre 900 et 1 000 pixels) et un nombre de colonnes divisible par deux, par trois et/ou par quatre. Les formats composés de 12 ou 24 colonnes répondent à ces critères (ce sont également des nombres hautement composés). On trouve aussi des grilles en 16 colonnes (nombre pratique). D’une manière générale, on privilégie les formats qui permettent des regroupements de colonnes variés.

Pour faire entrer ces colonnes dans une largeur donnée, on utilise la gouttière, l’espace séparant les colonnes, comme variable d’ajustement avec des valeurs allant de 10 à 30 pixels. Oui, vous avez bien lu : la gouttière, cet élément fondamental pour la respiration de toute grille de mise en page, n’est souvent que le rebut de calculs fastidieux !

Un gabarit de page pour l’imprimé

Pour définir une maquette de magazine destinée à l’impression, nous pouvons partir de la plus petite taille de caractère repérée dans les contenus (notes de bas de page, légendes, etc.) et augmenter la taille des textes en fonction des différents niveaux (notez que l’on peut aussi jouer sur la graisse, la couleur, le contraste, la casse ou un changement de fonte) :

• Notes de bas de page : 8 pt
• Légendes des photos : 10 pt
• Corps du texte : 12 pt
• Intertitres : 14 pt
• Rubriques  : 18 pt
• Titres de Chapitre : 21 pt
• Titre de l’ouvrage : 48 pt

En fonction du style et du public visé par la publication, nous déterminerons ensuite l’empagement à l’aide de tracés régulateurs pour obtenir des blancs tournants (les marges, pour faire simple), puis, pour chaque niveau, nous regarderons le nombre de caractères optimum qui nous donnera la largeur des colonnes, une des clés de la lisibilité et du confort de lecture.

Reste à voir combien de colonnes entreront dans le format dont nous disposons. Dans la plupart des publications, les marges servent de variables d’ajustement ; dans les ouvrages de luxe, c’est le format de l’ouvrage qui peut évoluer pour préserver des blancs tournants généreux.

Une maquette pour le Web

J’ai cherché la meilleure approche pour concevoir une grille modulaire sans trop me soucier ni du nombre de colonnes ni de la largeur totale de l’empagement, dans les limites d’une résolution d’écran de 1 024 pixels de large.

Une grille de mise en page vraiment modulaire à laquelle ce GIF animé ne rend pas justice !

La pêche à l’interligne

Et si la seule constante indépassable n’était finalement rien d’autre que l’interlignage ? En effet, s’il y a bien une chose d’un peu scientifique dans le processus de lecture, c’est qu’un interlignage possédant un ratio de 1,5 à 1,6 par rapport à une taille de caractère comprise entre 12 et 16 pixels, possède un potentiel de lisibilité en béton.

Après quelques essais, une valeur de 21 pixels pour l’interlignage s’est imposée. Ce chiffre correspond à la fois au produit du nombre d’Or typographique par un corps de texte de 14 pixels (1,5 x 14 = 21) et au produit du nombre d’Or tout court par un corps de texte composé en 13 pixels (1,618 x 13 = 21,034), ce qui permet de faire face à la plupart des situations. Un corps de texte en dessous des 13 pixels n’est de toute manière pas très raisonnable !

Les colonnes, les colonnes !

Il suffit d’utiliser cette valeur pour la gouttière et d’en faire aussi la largeur des colonnes pour obtenir une grille composée uniquement de modules de 21 pixels de large. C’est donc la largeur totale qui devient la variable d’ajustement à la place de la gouttière, permettant à cette dernière d’être en harmonie avec l’interlignage et un regroupement plusieurs colonnes comme 42px + 21px ou 63px + 21px et ainsi de suite.

Ce mode de calcul autorise l’affichage de 48 colonnes totalisant 987 pixels (48 x 21) – 21 qui se centrent parfaitement dans un écran de 1024 pixels, ce qui est bien pratique. Ces 48 colonnes sont divisibles par 2, 3 ou 4 autorisant de multiples regroupements pour obtenir pas moins de 13 combinaisons : 24, 21, 18, 16, 14, 12, 9, 8, 7, 6, 4, 3 ou 2 colonnes. A noter que le nombre 48 fait partie des nombres hautement composés, comme 12 et 24.

On peut aussi retrancher une ou plusieurs colonnes de chaque côté pour obtenir une largeur réduite : 22 colonnes pour une largeur de 903 pixels (ok, 22 ne se divise bien que par 2, mais n’oublions pas que les mises en page asymétriques en ont sous le talon aiguille !) ; 20 colonnes pour une largeur de 819 pixels ; ou encore 18 colonnes pour 735 pixels au cas où vous auriez besoin de concevoir pour une résolution en 800 x 600.

Adaptez, il en restera toujours quelque chose

Si vous trouvez que les valeurs proposées sont trop contraignantes, n’hésitez pas à partir sur une base de 20, 18 ou même 16 pixels pour votre gouttière et votre interlignage, sachant que les valeurs (taille du caractère / interligne) 12/20, 13/20, 14/20 mais aussi 12/18,13/18 ou encore 11/16 permettent une lisibilité à l’épreuve des «séniors» pour peu que vous soyez attentifs aux contrastes ;)

Ne vous faites pas griller

Les grilles sont une aide précieuse pour élaborer un design cohérent et ne sont pas très difficiles à mettre en place pour peu que l’on prenne le temps de se poser des questions sur leur rôle. Le protocole HTTP est sans état : c’est la persistance des éléments récurrents des pages que vous liez entre elles qui crée la notion de site Web. Pour autant, il est important de ne pas se laisser enfermer dans une grille : c’est vous qui devez la mettre «au pas» et non le contraire. En d’autres termes, ne vous demandez pas ce que vous pouvez faire pour votre grille, mais demandez-vous plutôt ce qu’elle peut faire pour vous !

Articles en relation avec les grilles

1. Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
2. Grilles de Mise en Page | typographie web et print
3. Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
4. Les frameworks CSS sont le nouveau format A4
5. #WDFR — Imprimez votre grille pour dessiner vos croquis
6. #WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday
7. Gridulator calcule la grille de votre design web
8. EmChart — Convertir des pixels en EM
9. Frameworks CSS — Blueprint vs 960 Grid System
10. Framework CSS — Sémantique, maquette dynamique et autres notes
11. Quelques notes sur les grilles de mise en page
12. Grid — Gardez le contrôle sur votre design web
13. Afficher / masquer votre grille de base avec jQuery

Brouillons en cours sur le même sujet

• Adapter votre grille aux agents utilisateurs avec les « Media Queries »

Articles sur le même sujet

• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Frameworks CSS — Blueprint vs 960 Grid System
• 36 frameworks CSS — Mettez une grille dans votre design

Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code.

Introduction

Les frameworks CSS ont été conçus pour accélérer le processus de prototypage d’un site web tout en étant utilisables en production. Ils proposent généralement plusieurs fichiers dédiés à une tâche spécifique : reset CSS, gestion de la typographie, système de grille, etc. Les exemples de code proposés dans cet article ont été parfois remaniés par rapport aux originaux pour garder une certaine lisibilité.

Blueprint — Raccourcir les temps de développement

Créé par Joshua Clayton, Blueprint est le plus connu. Il possède l’éco-système le plus riche : tutoriaux, implémentation dans des thèmes WordPress ou Drupal, générateurs de grilles, etc. Il propose en outre une gestion complète des éléments HTML (notamment les formulaires). A côté du fichier grid.css nous trouvons : reset.css, typography.css, ie.css et forms.css, ainsi que :

• Des «utilitaires» comme la mise en place de bordures entre les colonnes,
• Des plugins permettent d’affiner la gestion des boutons, de la typographie, des icônes de liens, ou encore de modifier le sens de lecture pour les langues qui s’écrivent de droite à gauche,
• Un modèle de page (template) au format .psd est disponible pour faciliter la mise en place des maquettes,
• Blueprint est disponible sur Github.

960 Grid System (ou 960.gs) — Fluidifier le flux de production

Créé par Nathan Smith, 960 Grid System propose également un reset.css, une gestion minimale (mais suffisante pour commencer) de la typographie avec text.css et le système de grille avec 960.css ou 960_24_col.css. Il n’y a pas de fichier ie.css.

Même si l’éco-système est un peu moins riche que Blueprint, il propose l’essentiel :

• Fichiers de démonstration,
• Le générateur de grille offre le choix entre un design liquide ou fixe (pourcentage ou fixe),
• Fichier PDF à imprimer pour dessiner des maquettes,
• Nombreux modèles de page pour Expression Engine, Fireworks, Flash, Illustrator, Indesign, Inskape, Omnigraffle, Photoshop et Visio,
• 960 Grid System est disponible sur Github.

Chacun des deux frameworks existe en plusieurs largeurs (950px, 960px) avec un nombre de colonnes allant de 12, 16 ou 24. Toutefois, les nombreux générateurs de grilles vous permettront de déterminer : largeur, nombre de colonnes et gouttière adaptés à vos besoins.

Fonctionnalités principales des frameworks CSS

Largeur et centrage du site web

Les deux frameworks proposent la même chose :

.container { width: 942px; margin: 0 auto; } // Blueprint

.container_16 { margin-left: auto; margin-right: auto;     width: 960px; } // 960.gs

En ce qui concerne le nombre de colonnes et la largeur des gouttières, je trouve Blueprint un peu radin avec ses 10px là où 960 Grid System offre généreusement le double, soit 20px d’espace entre les colonnes.

Le seul endroit où les 10px de gouttière sont intéressants, c’est dans la version en 24 colonnes, ce qui permet d’utiliser une colonne entière (30px) pour séparer des groupes de colonnes à certains endroits et garder l’espacement de 10px pour rapprocher des contenus possédant un corps de texte plus petit et/ou répartis sur un plus faible nombre de colonnes.

Dans les exemples qui suivent, j’ai utilisé la grille que j’ai conçu lors du redesign de ce blog : 16 colonnes de 42px séparées par une gouttière de 18px pour une largeur totale de 942px.

Créer des colonnes et des gouttières

La création des colonnes pour le placement des contenus est l’élément fondamental d’un système de grille. Blueprint et 960 Grid System procèdent de manières différentes :

Blueprint

.column, .span-1, .span-2, etc. {
    float: left;
    margin-right: 18px;
}
.span-1 { width: 42px; }
.last { margin-right: 0; }

960 Grid System

.grid_1,.grid_2, etc. {
    display:inline;
    float: left;
    position: relative;
    margin-left: 9px;
    margin-right: 9px;
}
.container_16 .grid_1 { width:42px; }
.alpha { margin-left: 0; }
.omega { margin-right: 0; }

.last but not .least

Dans le cas de Blueprint, il faut ajouter une classe pour le dernier bloc afin d’annuler la marge de 18px avec .last { margin-right: 0; }. Quant à 960.gs, ce n’est pas la peine puisque les marges sont réparties de chaque côté. Là où ça se corse, c’est quand on a besoin d’imbriquer des colonnes.

Chez Blueprint, seule la classe .last est nécessaire pour chaque dernier bloc, tandis que 960.gs nécessite deux classes pour annuler les deux moitiés de marges : .alpha { margin-left: 0; } et .omega { margin-right: 0; }. Ca va sans dire mais mieux en le disant : on a pratiquement toujours besoin d’imbriquer des colonnes à un moment ou un autre.

.column ?

Cette classe peut servir à placer des blocs sans être obligé de leur donner une largeur. J’avoue m’en servir assez peu.

display: inline et position: relative ?

960 Grid System ajoute deux propriétés. La première (display: inline) sert à circonvenir un bug d’IE6 qui à tendance à doubler les marges lorsque des éléments flottent du même côté qu’un margin. position:  relative sert à positionner les blocs indépendamment de leur position dans le code HTML (voir plus bas).

Créer des colonnes vides avant et/ou après le contenu

Dans une maquette web, toutes les positions ne sont pas occupées par du contenu et il est bon que le site respire. Pour cela on pourra aérer toutes ces colonnes en créant du vide avant ou après. C’est là qu’interviennent les classes .prefix_1 et suffix_1 de 960.gs ou .prepend-1 et append-1 de Blueprint. Les deux frameworks ont opté pour un padding-left pour les premiers et un padding-right pour les seconds pour « remplir » les blancs afin de conserver une largeur égale à la largeur de votre .container.

Positionner des blocs à l’écran indépendamment de leur position dans le code

La position des éléments dans le code est souvent tributaire de la manière dont on veut les afficher à l’écran. Si vous désirez modifier la position de votre sidebar par rapport au contenu sans modifier l’ordre des blocs dans votre code HTML, il suffira d’utiliser les classes suivantes :

960 Grid System

.container_16 .push_1 { left:60px; }
.container_16 .pull_1 { left:-60px; }

Blueprint

.push-1 { margin: 0 -60px 1.5em 60px; }
.push-1, .push-2, etc. { float: right; position: relative; }
.pull-1 { margin-left: -60px; }
.pull-1, .pull-1, etc. { float: left; position: relative; }

Rétablir le flux HTML après l’utilisation des flottants

Pour rétablir votre flux HTML après les float: left, il existe plusieurs techniques dont j’ai déjà longuement parler dans les articles Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire et Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Les deux frameworks proposent un jeu de classes CSS qui devrait vous permettre de voir venir. Pour info, voici la technique utilisée par 960.gs :

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
/ The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem./
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

.clear { clear:both; }

Conclusion

Il y a de bonnes idées dans les deux frameworks. Je ne suis pas fan de la gestion des marges de part et d’autre des colonnes de 960.gs : je préfére la simplicité de Blueprint. En revanche, je préfère les classes .push et .pull de 960 Grid System qui sont bien plus concises que celles de Blueprint. Pour finir, je trouve que le .clear de 960 Grid System mérite d’être renommé en .clear-hide pour pouvoir ajouter un clear: both simple mais toujours très pratique. Bref, il faut composer son propre framework CSS en piochant les bonnes idées à droite et à gauche.. Stay tuned!

Autres notes sur les frameworks CSS et le design par grille de mise en page

Framework CSS — Sémantique, maquette dynamique et autres notes

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. [...]

Quelques notes sur les grilles de mise en page

A mesure que les techniques des langages du web l’ont permis, des designers web talentueux ont travaillé à l’élaboration d’environnement de travail permettant de mettre en place des systèmes de grille adaptés aux contraintes de la création de pages web. Contrairement à l’imprimé où le langage de description de pagePostscript d’Abode est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs). [...]

Grid Design — Quelques notes sur l’intérêt des grilles de mise en page

La popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dansFramework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs détracteurs de jeter le bébé avec l’eau du bain. Le problème vient sans doute du terme grille lui-même. Peu gratifiant, il évoque la prison, la clôture, la répétition, l’uniformité… Bref, tout le contraire des aspirations du créatif qui refuse de brider sa créativité sur l’autel d’une vision mécaniste du processus créatif [...]

Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière,Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML [...]

Framework CSS sémantique ? Comment je vois les choses

Je reviens vers vous sur la question des frameworks CSS suite à la lecture de A Reflexion About Semantic Grids qui défend grosso modo le point de vue selon lequel les frameworks ne sont pas sémantiques et incitent à marcher sur la tête en bousculant le flux de production web. [...]

24 frameworks CSS — Mettez une grille (ou pas) dans votre site web

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint. [...]

BIC, framework CSS orienté couleur et typographie

BIC est un meta framework CSS basé d’une part sur le reset CSS d’Eric Meyer pour la remise aux valeurs par défaut des éléments HTML (clean.css) et le framework 960.gs pour la partie grille de mise en page (layout.css), et d’autre part sur de bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). [...]

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. [...]

Frameworks CSS + Reset CSS : design from scratch

L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. [...]

Framework CSS — mettez vos grilles au pas !

Grosso modo, tout le monde reconnait que oui, les frameworks c’est de la balle mais que non, ça n’est pas toujours possible car les éléments du design, du .psd, de la charte graphique, etc. n’entrent pas forcément dans une grille horizontale. [...]

Articles sur le même sujet

• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Framework CSS — Sémantique, maquette dynamique et autres notes
• 36 frameworks CSS — Mettez une grille dans votre design

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint.

Liste mise à jour le 25/08/2011

New! Bootstrap, from Twitter

Bootstrap est une boite à outils issue de Twitter conçue pour donner un coup d’accélérateur à la création de vos sites ou applications web. Il inclut : une base CSS et HTML pour la typographie, les formulaires, les boutons, les tableaux, les grilles, la navigation, etc.

inuit.css

   Ce framework CSS est un concentré des bonnes pratiques et des années d’expériences de Harry Roberts. Il tient compte : des périphériques mobiles (tablette PC, iPhone, Android, etc.), des nouvelles balises HTML5, de la typographie. Il contient le minimum pour une meilleure extensibilité et flexibilité. Il fait le deuil de IE6 et «last but not least» (si j’ose dire), inuit.css s’affranchit des classes .end, .last ou .first ! Suivez @inuitcss ;)

1 140 CSSGrid

Cette grille en 12 colonnes possède une largeur de 1 140 pixels de large parfaite pour les résolutions supérieures ou égales à 1 280 pixels de large. Sur les écrans plus petits, le design devient fluide grâce aux Media Queries. Un Template Photoshop basé sur une grille en 12 colonnes pour 1 140xp de large est disponible.

Tiny Fluid Grid

Ce générateur de grille fluide ne vous demandera pas de sortir votre calculatrice : choisissez entre 12, 16 ou 24 colonnes, le pourcentage pour l’espace entre les colonnes (gouttière) et les largeurs mini et maxi de votre page. Le système de grille est basé sur 960.gs.

Flurid

Flurid est un système de grille de mise en pages fluide qui fonctionne avec Internet Explorer versions 6 et 7. Une mise en page fluide garantie l’utilisation optimale de l’espace, quelle que soit la résolution de l’utilisateur.

CSS:resetr

Essayez le reset CSS de votre choix parmi la quinzaine de de reset disponibles et observez les résultats sur différents types de contenus.

Gridinator

Outil en ligne pour calculer votre grille de mise en pages et obtenir les fichiers CSS & HTML ainsi que l’image de la grille pour vous aider à caler votre mise en page.

Two Lines CSS Framework

Système de grille qui tient en deux lignes avec l’utilisation de display:table et display:table-cell. Voir aussi du même auteur : CSS Mobile Reset — Reset CSS léger adapté aux périphériques mobiles : remise à zéro du minimum de balises HTML et proposition de nouvelles valeurs pour le minimum d’éléments HTML. Très pratique aussi pour les autres périphériques.

The Simpler CSS Grid

Cette grille de mise en page a la particularité de bénéficier de l’expérience des auteurs des autres systèmes de grilles comme Blueprint ou 960.gs : elle brille par sa simplicité et son intelligence. Voir The Simpler 978px Grid et The Simpler 940px Grid.

Toucan CSS Reset

Il ne s’agit pas d’un framework à proprement parler, mais ce reset CSS ne se contente pas de faire table rase des styles par défaut des balises HTML. Toucan CSS Reset redéfinit les balises avec des règles CSS pour la typographie, les niveaux de titre, les paragraphes, les listes, les formulaires, les tableaux, etc. Très léger, Toucan CSS Reset est très flexible et s’adaptera sans peine à votre fichier grid.css préféré !

The Square Grid

   Ce framework est base sur une grille de 35 colonnes égales que l’on peut regrouper pour obtenir des maquettes aux formats suivants : 18 colonnes de 28px, 12 colonnes de 56px, 9 colonnes de 84px, 6 colonnes de 140px, 4 colonnes de 224px, 3 colonnes de 308px et 2 colonnes de 476px toutes séparées par une gouttière de 28px pour une largeur totale de 994px.

52Framework

Ce framework est résoluement tourné vers l’avenir en utilisant HTML5 avec header, nav, section, article, footer et CSS3 avec le sélecteur ::selection, les coins arrondis, les ombres portées pour le texte ou les blocs. La grille est composée de 16 colonnes de 52 pixels chacune séparées par une gouttière de 8 pixels. Les fichiers CSS de 52Framework vont à l’essentiel et si je préfère le système de grille de Blueprint, ça vaut le coup de de s’inspirer de reset.css (avec les nouvelles balises HTML5) et de general.css pour avoir des éléments de formulaires avec des coins arrondis et des ombres portées.

Element CSS Framework

Ce framework propose un environement global pour créer un site web avec un ensemble de dossiers prêts à être remplis : /clientFiles, /concepts, /copy, /js,  etc. et d’autres contenant les éléments de base du framework comme /css (qui contient les fichiers du framework proprement dit) et /elementsImages qui contient les icônes qui accompagnent externalLinks.css. Ces deux derniers éléments faisant tout le charme de ce framework en fournissant des classes CSS et des icônes pour représenter les liens externes.

Baseline CSS

Aligner des lignes comportant des textes de tailless différentes n’est pas toujours facile et c’est l’objectif de ce framework moderne (oui, ça veut dire qu’il y a un soupçon de HTML5et de CSS3 dedans). Notez que la compatibilité avec IE6 n’est pas garantie. Au menu : un reset CSS avec certaines des nouvelles balises HTML5 (mais curieusement avec des balises HTML dépréciées également), un système de grille, des styles de formulaires et un peu de  typographie pour terminer.

960.gs

Ce système de grille est conçu pour fluidifier votre chaine de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12, 16 ou 24 colonnes. Des classes comme push_XX ou pull_XX permettent de réarranger les blocs indépendamment de leur ordre d’apparition dans le code HTML. Un générateur de grille personnalisée permet de spécifier la largeur et le nombre des colonnes et la taille de la gouttière. Il existe même un générateur de blocs permettant de définir votre mise en page .

tripoli

Redéfinit une feuille de style par défaut pour les balises HTML de manière à assurer un rendu identique sur les navigateurs présents sur le marché. Propose de nombreux fichiers additionnels comme layout.css pour la grille ou negative.css pour inverses les contrastes, etc.

yaml

Yet Another Multicolumn Layout est un framework (x)html/css pour la création de maquettes robustes et flexibles centré sur la légèreté et l’accessibilité. Propose un générateur WYSIWYG YAML Builder pour construire votre mise en page.

bluetrip

Le meilleur de Blueprint et de Tripoli avec un zeste de Hartija pour la feuille de style à l’impression, la simplicité de 960 Grid System. Le fichier screen.css regroupe le reset CSS d’Eric Meyer, le système de grille, la gestion des liens externes (icône selon l’extension ou la destination) et de l’inversion des contraste, plus des styles pratiques pour la gestion des textes.

typogridphy

Basé sur 960 Grid System, ce framework permet de créer des grilles flexibles d’une grande beauté typographique.

yui grids

Offre un jeu prédéfinit de largeur de page comprenant six templates avec la possibilité de subdiviser les blocs. Au total c’est plus de 1 000 combinaisons de maquettes pour seulement 4kb.

elasticss

Basé sur des techniques de colonnage traditionnel en 4 colonnes, ce framework permet de multiples combinaisons et subdivisions. Il se distingue des autres par sa capacité à produire facilement des design fixes, liquides ou élastiques.

sencss

Un frameword zen qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs. Grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux.

the golden grid

Ce système de grille est le fruit d’une recherche constante de la grille parfaite : rien de tel que le nombre d’Or pour se rapprocher des dieux !

css-boilerplate

Par l’un des créateurs de Blueprint qui a décidé de se remettre à l’ouvrage pour aboutir à un framework qui ne vous obligera plus à choisir entre sémantique et efficacité : c’est vous qui décidez d’utiliser float: left; width: 240px; margin-right: 110px ou class="column span-2 append-1" !

BIC

De bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). Cf. BIC, un framework orienté couleur et typographie.

bungee

Propose une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Avec un niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s’affiche donc parfaitement sur un écran de faible résolution.w

sparkl

Combine un marquage HTML CHIC (Code HTML Intrinsèquement Classe — POSH en anglais) et du javascript non-intrusif pour créer des sites web à l’épreuve des balles et conformes aux Standards. Ce framework CSS très modulaire vous permettra de vous concentrer sur vos besoins.

hartija

Regroupe les meilleures pratiques en matière de feuille de style destinées à l’impression.

The 1Kb CSS Grid

Une grille minimaliste qui tient en une quinzaine de déclarations CSS idéale pour les débutant qui veulent comprendre le principe général des frameworks et pour les intégrateurs aguerris qui verront là un moyen économique de donner un rythme horizontal à leur mise en page. Choix du nombre de colonnes, de la gouttière et de la largeur totale avant le téléchargement.

1 line CSS Grid Framework

Vous avez bien lu, il s’agit d’un framework qui tient en une seule déclaration .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Etonnant, non ?

emastic

Très complète, cette bibliothèque CSS s’utilise aussi bien avec des em qu’avec des % et s’accommode de largeur fixes ou fluides pour un poids de 4Kb pour la version compressée. Nombreuses démonstrations disponibles pour voir ce qu’il est possible de faire.

malo

Petit frère de emastic, malo se distingue par sa légèreté au service d’une grille en pourcentage.

logicss

basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités de redimensionnements de texte et un rythme vertical. Trois systèmes de grilles très souples personnalisables à l’aide d’une boite à outils. Design élastique avec l’unité em, liquide via les pourcentages % ou fixe avec les px.

MyCSS Grid System

Système de grille en 960px avec une utilisation du nombre d’or pour obtenir des proportions harmonieuses. Assez verbeux dans le nombre de classes pour placer des éléments.

A CSS Framework

Cet ensemble de fichiers CSS propose des maquettes prêtes à l’emploi en 1, 2 ou 3 colonnes avec un header, footer, sidebar et navigation horizontale ou verticale. Un fichier framework.html est disponible pour commencer.

Frame

Frame: A CSS framework from the year 2050 se veut la nouvelle manière de mettre en page les contenus et de construire des interfaces web. Il combine les idées de 960.gs, de Blueprint et de nombreuses techniques pour obtenir le framework css le plus simple et le plus fluide de tous les temps !

Formee

Formee est un framework spécialisé dans la mise en forme des éléments de formulaires. Le système de grille pour l’alignement des labels et autres input est basé sur 960.gs. Ce mini-framework est composé de deux feuilles de style : form-style.css et form-structure.css qui parlent d’elles-mêmes.

Marker CSS

Marker CSS se distingue par une syntaxe prenant en compte un nombre important de propriétés. Peut-être trop à mon humble avis, mais tout les goûts sont dans la nature ! Par exemple «  signifie : A pour famille de police Arial ; s13 font-size 13 pixels ; c666 couleur présélectionnée ; et tc pour avoir le texte aligné au centre.

PS : Cette liste est une version réactualisée de celle que j’ai déjà publiée en juin 2009 à la fin de l’article Frameworks CSS, mettez vos grilles au pas ! Toute ressemblance avec des listes de frameworks CSS publiées ces derniers temps, bla bla bla…

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d’Or
• Frameworks CSS — Blueprint vs 960 Grid System
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
• Framework CSS — Sémantique, maquette dynamique et autres notes

C’est sur le Dator Blog, que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. La splitbar peut être déplacée très facilement de manière accessible en cliquant-déplaçant avec la souris, avec une accessKey ou encore via la touche tab. jQuery Splitter requiert la version 1.3.2 de jQuery et permet d’afficher une séparation entre deux contenus sous la forme :

HTML

<div id="MySplitter">
    <div> Left content goes here </div>
    <div> Right content goes here </div>
</div>

CSS

#MySplitter {
    height: 200px;
    width: 500px;
    border: 5px solid #aaa;
}
#MySplitter div {
    overflow: auto;
}
.vsplitbar {
    width: 5px;
    background: #aaa;
}

jQuery

$().ready(function(){
    $("#MySplitter").splitter();
});

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• 139 ressources Javascript et jQuery
• jQuery — Toutes les femmes sont folles | de Q | 10 +
• Mise-à-jour de la grosse grosse liste pour webdesigner
• 1000 ressources pour le développement web et WordPress

Ca fait quelque temps que je n’ai pas parlé du thème Sandbox qui contient une foultitude de classes CSS générées automatiquement en fonction du contexte. Ce « meta » thème pour WordPress est déjà en version 1.3 pour la branche 2.3.x de WordPress et existe également en version 0.9.8 pour ceux qui serait resté avec un WordPress 2.0.x. Une des particularités de la version 1.3 est la présence d’un fichier .pot pour localiser ou traduire le thème !

Prêt pour la prochaine génération de thèmes WordPress ?

La spécificité de Sandbox est donc de servir de fondations pour bâtir d’autres thèmes. A ce propos, j’attire votre attention sur le thème WordPress Vanilla conçu par Alister Cameron, blogueur et designer de talent, qui fut membre du jury pour le concours de thèmes Sandbox qui s’est terminé en juillet 2007 avec 46 thèmes en lice.

Le thème Vanilla est bâti autour de Sandbox et du framework UI CSS de Yahoo!, ce qui lui permet une certaine souplesse dans le choix de la largeur du design, de la taille des colonnes et de plein d’autres choses que je vous laisse découvrir dans le billet de l’auteur. Bref, un thème pour plusieurs maquettes avec la prise en compte des formats de publicité définit par l’IAB !

Pour devenir Alpha testeur, il suffit d’en faire la demande à Alister Cameron à l’adresse : alister@alistercameron.com ou dans les commentaires de son billet.

Articles sur le même sujet

• Sandbox Designs Competition : 46 thèmes pour WordPress passés en revue
• 3 frameworks pour vos thèmes WordPress
• Nouveau design en place : plus bleu, plus carré, plus centré
• Mise en place d'un nouveau design : perburbation en vue ;)
• un zobibi en pleine forme avec le thème Sandbox pour WordPress

Je n’ai pas résisté à l’envie de vous proposer ma traduction de l’article CSS Frameworks + CSS Reset: Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d’un Reset CSS, pour s’affranchir des différences de rendu entre les navigateurs. L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d’éventuels retours sur la traduction, ce billet est en version bêta.

Quelque soit le projet, il y a toujours un moment où il faut définir des classes ou des identifiants sur lesquels on a déjà travaillés. Or, nous ne sommes pas obligé de réécrire le même code CSS ou (X)HTML encore et encore. Pour éviter les erreurs il est préférable de démarrer avec un fichier reprenant les éléments récurrents plutôt que de réinventer la roue à chaque fois.

C’est là que les framework et les reset CSS pointent le bout de leur nez. En les utilisant, vous avez une feuille de style par défaut et un marquage impeccable, vous gagnez du temps et vous êtes assurés d’avoir un code de bonne qualité dès le départ. Mais qu’est-ce vraiment qu’un framework ? Et en quoi la remise à zéro des styles CSS est-elle utile ?

Jettons un oeil sur les principes sous-jacents aux frameworks CSS, sur leurs avantages et inconvénients, sur les frameworks CSS les plus populaires et la douzaine de feuille de style par défaut que l’on peut utiliser lorsqu’on travaille sur le design d’un nouveau site web.

• Cet article ne couvre pas l’ensemble des outils et techniques concernant les grilles de mise en pages. Vous pouvez approfondir la question du design web basé sur l’utilisation d’une grille en lisant l’article Designing With Grid-Based Approach.
• Vous trouverez des centaines de templates CSS dans l’article Free CSS Layouts and Templates.
• Merci de noter que cet article traite des frameworks CSS, pas des frameworks de développement côté serveur comme CakePHP et encore moins des frameworks de développement web tels que Coda ou Dreamweaver.

Qu’est-ce qu’un framework CSS ?

• Un framework peut être défini comme un environnement ou un cadre de travail fournissant une structure conceptuelle que vous utiliserez pour démarrer vos projets de sites web. Par exemple, au lieu de définir une remise à zéro globale, une ligne de base cohérente pour vos textes, des règles typographiques ou encore des styles de base pour les formulaires à chaque fois que vous commencez un nouveau projet, vous pouvez mettre en place un style par défaut une fois pour toute et vous en servir pour tous vos futurs projets. C’est ce que nous appellons un environnement de travail CSS.
• Un framework CSS n’a pas besoin d’être compliqué ou de tout prendre en charge. Il peut ne contenir qu’un simple jeu de feuilles de style CSS tel que :
  • typography.css pour les règles typographiques de base,
  • grid.css pour la mise en page par grille ou
  • layout.css pour des maquette générales,
  • form.css pour des styles de formulaires basiques,
  • general.css pour tout autre style supplémentaire.
• et ainsi de suite… Vous pouvez aller plus loin dans la segmentation de votre code, par exemple : structure, typographie, présentation, sections spécifiques (menus, navigations), impression, web mobile, contournements spécifiques pour certains navigateurs (via les commentaires conditionnels pour Internet Explorer). Toute la segmentation du code des frameworks CSS les rend généralement pratiques à utiliser, mais peut entrainer une réelle charge serveur supplémentaire à cause du nombre de requêtes http par pages vues [Treading Lightly With CSS Frameworks, par Gary Barber].
• En bref, les frameworks sont un jeu d’outils, de bibliothèques, de conventions et de bonnes pratiques qui tentent de convertir les tâches répétitives en modules génériques réutilisables. Le but est de permettre au designer ou au développeur de se concentrer sur les tâches propres au projet en cours, plutôt que de l’obliger à réinventer la roue à chaque fois. [Framework For Designers, par Jeff Croft].

Les avantages du framework CSS

• Vous augmentez votre productivité et évitez les erreurs les plus courantes. Si vous développez de nombreux sites similaires, un code CSS générique peut radicalement améliorer votre productivité, vous aider à éviter les erreurs communes et simplifier la gestion du code CSS.
• Vous normalisez votre code et vos classes. Vous avez un code CSS et (X)HTML par défaut, ce qui vous permet d’utiliser les mêmes identifiants et noms de classes dans vos projets. Cette permanence du code à travers l’ensemble de vos projets rend vos sites web plus faciles à maintenir sans avoir à vous replonger dans le code source pour savoir comment il fonctionne.
• Vous avez un meilleur flux de production au sein de l’équipe. Si le framework CSS est bien documenté, il peut être utilisé dans l’équipe comme base de travail commune, évitant ainsi les incompréhensions tout en optimisant les flux de production. Par ailleurs, en évitant les erreurs, vous vous donnez les moyens de rendre votre travail dans les temps sans sacrifier à la qualité et sans coût supplémentaire.
• Vous optimisez la compatibilité entre les différents navigateurs. Si votre frameworks CSS est à l’épreuve des balles, vous n’avez pas à vous soucier d’éventuels problèmes de compatibilité avec les navigateurs présents sur le marché. Vous pouvez commencer à coder droit devant !
• Vous avez un code finalisé, propre et bien structuré. Les frameworks CSS fournissent des fondations bien pensées pour vos sites ; en les utilisant vous avez un style de base pour tous vos éléments HTML. N’avez-vous jamais oublié l’élément code ou abbr ? CQFD.

Les inconvénients des frameworks CSS

• Vous aurez besoin de temps pour comprendre le framework. Pour l’utilisateur moyen, [...] le temps requis pour comprendre l’architecture d’un framework l’emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don't use frameworks]
• Vous devrez avoir une connaissance approfondie de l’architecture de votre code. En utilisant un framework CSS externe, vous ne serez pas dispensé d’une profonde connaissance de votre code. Vous devrez savoir exactement comment fonctionne votre environnement de travail. En construisant un site depuis les fondations, vous bénéficiez d’une bonne connaissance de l’architecture de votre site que vous ne pouvez pas apprendre par l’étude ou la documentation. [Why I don't use frameworks]
• Vous héritez des bugs ou des erreurs de quelqu’un d’autre. Si vous utilisez un framework CSS, vous pouvez être amené à corriger les bugs du concepteur du framework en question, ce qui est toujours plus chronophage que de régler ses propres erreurs.
• Vous développez des sites grâce au framework et non pas d’après une solide connnaissance des CSS. Un des grands problèmes posés par les frameworks, c’est que les développeurs finissent par s’attacher au framework lui-même au lieu du code qu’il y a derrière. La connaissance qui en résulte n’est pas réutilisable, ce qui limite fortement les compétences du développeur. [Please Do Not Use CSS Frameworks, par Jonathan Christopher].
• Vous avez du code inutile. Qu’il s’agisse des frameworks pour les langages côté serveur ou des bibliothèques Javascript, il y a souvent une grande partie du code qui ne sera pas utilisée. Si ce n’est pas un souci majeur côté serveur, ceci peut dégrader fortement les performances quand il s’agit d’un framework qui agit côté client. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Les CSS peuvent ne pas être sémantiquement correctes. CSS et (X)HTML travaillent main dans la main. (X)HTML est un langage sémantique par nature qu’il est impossible d’englober dans un framework. Chaque projet est unique et entraine une structure de document unique en terme de classes ou d’identifiants. Les frameworks CSS suppriment la grande majorité des valeurs sémantiques dans le document, et à mon avis, ne devraient pas être utilisés. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Ignore les spécificités de vos projets web. Le design devrait être basé sur le contenu et non sur un template standardisé réutilisable à volonté.

Les frameworks CSS en détail

YAML (Yet Another Multicolumn Layout)

Le framework (X)HTML/CSS de Dirk Jesse offre toute la panoplie de templates par défaut pour un nombre considérable de projets web du plus simple au plus complexe. YAML est basé sur les standards web et s’accomode de tous les navigateurs web modernes. Tous les bugs de rendu d’Internet Explorer ont été éliminés. YAML est totalement compatible avec toutes les versions d’IE, de la version 5.x/Win à la version 7.0.

A côté des différents templates conformes aux standards, ce framework offre également une feuille de style pour le débuggage, une pour l’impression, ainsi que des outils aussi robustes que variés pour faciliter le développement web avec YAML. Tous les composants CSS du framework ainsi que les différentes méthodes de mise en page sont parfaitement documentés (en Anglais et en Allemand) et agrémentés de nombreux exemples.

Vous avez aussi la possibilité d’utiliser l’interface visuelle YAML Builder pour créer vos maquettes en WYSIWYG dans votre navigateur web. Vous pouvez choisir le Doctype, les éléments de base de votre maquette (#header, #footer, …), le nombre de colonnes et l’ordre dans lequel vous voulez les voir apparaitre dans le code ainsi que leurs largeurs. Le glissé-déposé est possible pour imbriquer à la fois des sous-templates et du contenu factice. Le framework offre la possibilité d’afficher le code complet (marquage XHTML et CSS) et de passer du mode brouillon à la prévisualisation de la maquette finale et vice-versa.

Blueprint

Le framework Blueprint, créé par l’étudiant norvégien Olav Frihagen Bjørkøy, semble très prometteur. Ce framework propose : des fondations solides pour la typographie ; une grille de mise en page facilement personnalisable ; une gestion pratique de la typographie et des lignes de base pour le texte ; une feuille de style pour l’impression. Il utilise notamment des tailles de caractère relatives, un Reset CSS et est supposé ne pas contenir de code inutile. Ce dernier point n’est pas toujours vrai.

Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l’utilisation de Blueprint que l’on peut considérer comme le nouveau standard à venir dans l’approche du design web basé sur une grille de mise en page.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library propose un jeu de fichier CSS faisant office de framework. Le noyau YUI CSS inclut notamment : Reset CSS, Base CSS, Fonts CSS et Grids CSS.

Alors que le Reset CSS supprime et neutralise les différences d’affichage des éléments HTML, Base CSS sert de fondation pour un affichage cohérent des éléments HTML sur les navigateurs modernes.

Fonts CSS normalise et permet de contrôler la typographie sans se soucier du rendu entre les navigateurs ; le framework fournit des tailles de caractères et des hauteurs de ligne cohérents, permet à l’utilisateur d’ajuster la taille des polices en gardant une consistance d’un navigateur à l’autre. Fonctionne à la fois en Quirks Mode et Standards Mode.

Grids CSS fournit une sélection de quatre largeurs de page et six modèles prédéfinis avec la possibilité d’empiler ou d’imbriquer des zones subdivisées en deux, trois ou quatre colonnes. Le fichier de 4 kb propose des combinaisons de plus de 1000 maquettes différentes. Le framework autorise la modification de la largeur pour les pages de largeur fixe ; il permet également de gérer les maquettes avec des largeurs exprimées en pourcentage (100%) aussi bien que les largeurs les plus courantes comme 750px, 950px et 974px, tout en permettant de modifier ces chiffres. YUI offre aussi YUI Grids Builder, une interface simple pour personnaliser ses grilles de mise en page.

Vous devez savoir que ces frameworks sont souvent critiqués : leur code est truffé de code inutile et leur marquage est peu sémantique ; par ailleurs, ils génèrent trop de classes, d’ID et de div faisant office de containers pas toujours nécessaires. A noter que Yahoo! UI Library est livré avec une documentation détaillée accompagnée de nombreux exemple, tutoriels, pense-bête (cheat sheet), modèles et outils.

Reset Global CSS

• Le Reset global est nécessaire pour donner à votre site web une allure plus ou moins identique quelque soit le navigateur utilisé. Par défaut, les navigateurs utilisent différentes valeurs de margin, de padding ou de line-height. Le Reset Global assure que tous les navigateurs (du moins, la plupart) afficheront le site de manière identique.
• *{margin:0;padding:0} est une mauvaise pratique. Malheureusement, ce n’est pas une bonne pratique. C’est très difficile pour les agents utilisateurs d’appliquer ces règles pour chaque élément présent dans le document, surtout si ce dernier est très long. Cette pratique peut aussi supprimer de nombreux styles par défaut qui ont leur raison d’être, en particulier quand vous voulez garder les styles par défaut des boutons submit. [CSS Techniques I Use All The Time par Christian Montoya]
• Tripoli Tripoli est un standard CSS générique pour le rendu HTML. En se substituant à la feuille de style par défaut des navigateurs, Tripoli forme une fondation stable pour vos projets web pour uniformiser le rendu entre les navigateurs. Un jeu de fichiers CSS est censé vous donner des fondations solides pour vos designs CSS. Toutes les valeurs par défaut, incluant des douzaines d’éléments (tables, listes, typographie, mais aussi les en-têtes (h1 – h6), les abréviations, les citations, et les formulaires ont été pris en compte pour leur donner une lisibilité optimale et assurer aux textes une présentation bien structurée.
  
• Reset CSS Reloaded d’Eric Meyer. Une remise à zéro qui ne serait pas basée sur le sélecteur universel. Comme Eric Meyer le dit, Les styles devraient lister tous les éléments candidats à la neutralisation et les remettre à zéro exactement comme ils devraient l’être, chacun selon leur nature.
• Reset CSS de Yahoo! UI Library Les fichiers compris dans YUI Reset CSS suppriment et neutralisent le rendu des éléments HTML qui manquent de consistance d’un navigateur à l’autre, en créant un terrain de jeu réservé aux navigateurs modernes et en fournissant des bases à partir desquels vous pourrez déclarer explicitement vos intentions.
• CSS Global Styles Reset par Kyle Neath. Un simple Reset CSS accompagné de classes additionnelles pour améliorer le débuggage.
• CSS Global Reset par Christian Montoya – css L’idéal est d’avoir une liste complète des réglages par défaut à appliquer dès le départ pour pallier les insuffisances de chaque navigateur.
• CSS Global Reset par Mike Rundle.
• Master Stylesheet Cette feuille de style par défaut prend quelques règles typographiques en considération, comme l’espacement entre les niveaux de titres, les paragraphes et blocs de citation (blockquote).

Styles de base CSS

Web Typography: bottom margins of paragraphs and lists par Marko Dugonjic.

Compose To A Vertical Rhythm L’unité de base de l’espace vertical est la hauteur de ligne (line-height). En établissant une hauteur de ligne qui puisse être appliquée à l’ensemble du texte de la page, qu’il s’agisse des titres, du corps du texte ou des notes de bas de page, on obtient un rythme vertical sur laquelle s’appuyer, qui guide le lecteur à travers le contenu.

Baseline Stylesheets par Darren Hoyt.

One clean HTML markup, many layouts… par TJKDesign.

Mike Stenhouse’s CSS Framework Il est possible de séparer les éléments d’une feuille de style en composants réutilisables pour d’autres projets. La suite logique est d’étendre ce principe pour mettre en place un framework CSS, autorisant des développements rapides avec des composants déjà testés. Tout ce qu’il faut pour y parvenir est de créer un jeu de convention de nommage et un template de base assez souple…

Développez votre propre framework CSS !

Garder à votre framework CSS un degré d’abstraction aussi élevé que possible. Habituellement le Reset Global et le formatage de base sont un compromis judicieux qui vous donnera un bon point de départ sans pour autant vous lier à la structure rigide d’un framework.

En développant vos propres styles par défaut, pensez à réduire au maximum le nombre de classes, d’identifiants et d’éléments HTML ; garder à l’esprit l’importance de la signification sémantique des classes que vous utilisez.

Des idées ? Faites-le nous savoir, et partager vos connaissances dans les commentaires !

Article original écrit par Sven Lennartz et Vitaly Friedman de Smashing Magazine.

Fondé en septembre 2006, Smashing Magazine fournit des informations utiles aux webdesigners et aux développeurs. Notre but est d’informer nos lecteurs sur les dernières tendances et techniques dans le monde du développement web, de manière claire, précise et régulière. Nous n’essayons pas de vous convaincre avec la quantité, mais en vous présentant des informations de qualité. C’est ce qui nous rend différent. En fait, nous frappons vos esprit avec l’information qui vous rendra la vie plus facile. Vraiment.

Notes sur la traduction. J’ai essayé de suivre au mieux les intentions de l’auteur et le déroulement de l’article, mise en forme comprise afin de permettre une comparaison rapide avec l’original en cas de doute sur la pertinence de tel ou tel parti pris dans la traduction.

Alors, ces frameworks, on les utilise ou pas ? (notes personnelles en guise de conclusion)

Les frameworks CSS ont le vent en poupe et c’est globalement mérité. Toutefois, si de nombreux arguments militent en leur faveur, ils ne sont pas dépourvus de défauts. En ce qui me concerne, je leur trouve une utilité pédagogique certaine : en les étudiant, on se fait une idée des bonnes pratiques en matière d’organisation des CSS. Pour ce qui est de les utiliser en production, je distingue deux types d’utilisation :

1. Vous savez ce que vous voulez comme structure HTML en terme d’éléments et de colonnes pour adapter les éléments graphiques en conséquence. Pas de souci particulier, dans ce cas de figure les frameworks CSS vous feront gagner beaucoup de temps.
2. Vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin. Là, l’utilisation des frameworks est déjà moins évidente et vous risquez de passer beaucoup de temps à caler les éléments entre eux.

Après, c’est comme beaucoup de choses, j’imagine qu’avec de la motivation et de l’huile de coude on finit par maitriser le framework et faire face à tous les cas de figure en matière d’intégration CSS.

Finalement, et je trouve celà assez amusant, si le framework est la suite logique du Reset CSS, la suite logique du framework existe déjà depuis longtemps : c’est Dreamweaver avec le respect des standards en plus et la possibilité de gérer le multi-colonnage, pied de page compris…

Stay tuned and mind the gap!

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Exercice de style CSS et HTML : table vs div
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes sur XHTML et CSS, au fil de l’eau…
• Vos positions s'affaissent ? Mettez le bottom à zéro…