Développement efficace avec les frameworks CSS Paris-Web 2008 Paris-Web 2008 Thomas Parisot ( case.oncle-tom.net )
Plan <ul><li>Qu'est-ce qu'un framework CSS ? </li></ul><ul><li>Modules et fonctionnalités </li></ul><ul><li>Frameworks CSS...
Qu'est-ce qu'un framework CSS ?
Qu'est-ce qu'un framework CSS ? <ul><li>Qu'est-ce qu'un framework ? </li></ul><ul><li>Base de travail extensible </li></ul...
Qu'est-ce qu'un framework CSS ? <ul><li>OK mais pour les CSS ? </li></ul><ul><li>Fondations solides  cross-browser </li></...
Modules et fonctionnalités
Modules et fonctionnalités <ul><li>Reset </li></ul><ul><li>Basés et/ou inspirés du reset.css d'Éric Meyer </li></ul><ul><l...
Modules et fonctionnalités <ul><li>Typographie </li></ul><ul><li>Règle ... la typographie </li></ul><ul><li>Complément idé...
Modules et fonctionnalités <ul><li>Grilles </li></ul><ul><li>Présentations en colonnes </li></ul><ul><li>Libres ou assisté...
Modules et fonctionnalités <ul><li>Impression </li></ul><ul><li>Optimise pour l'impression </li></ul><ul><li>Révèle l'URL ...
Modules et fonctionnalités <ul><li>Correctifs pour Internet Explorer </li></ul><ul><li>Intégrés ou en feuille(s) séparée(s...
Modules et fonctionnalités <ul><li>Plugins </li></ul><ul><li>Feuilles additionnelles optionnelles </li></ul><ul><li>Des ex...
Frameworks CSS majeurs
Frameworks CSS majeurs <ul><li>Blueprint </li></ul><ul><li>Complet </li></ul><ul><li>Facile </li></ul><ul><li>Largeur fixe...
Frameworks CSS majeurs <ul><li>Yahoo! CSS Fundation </li></ul><ul><li>Excellente documentation </li></ul><ul><li>Fluide ou...
Frameworks CSS majeurs <ul><li>Tripoli </li></ul><ul><li>Très facile  </li></ul><ul><li>Purement axé typographie </li></ul...
Frameworks CSS majeurs <ul><li>YAML ( Yet Another Multicolumn Layout ) </li></ul><ul><li>Relativement complet </li></ul><u...
Frameworks CSS majeurs <ul><li>960 Grid System </li></ul><ul><li>Très très similaire à Blueprint </li></ul><ul><li>12 ou 1...
Comment choisir un framework ?
Comment choisir un framework CSS ? <ul><li>Quelques questions à se poser </li></ul><ul><li>Largeur fixe ou fluide ? </li><...
Comment choisir un framework CSS ? <ul><li>Situations à risques </li></ul><ul><li>Contexte graphique changeant </li></ul><...
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Cas pratique avec Blueprint
Merci ;-) http://www.slideshare.net/oncletom/dveloppement-efficace-avec-les-frameworks-css-presentation/
Prochain SlideShare
Chargement dans…5
×

Développement efficace avec les frameworks CSS

6 082 vues

Publié le

Publié dans : Technologie
0 commentaire
15 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 082
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 700
Actions
Partages
0
Téléchargements
120
Commentaires
0
J’aime
15
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Développement efficace avec les frameworks CSS

  1. 1. Développement efficace avec les frameworks CSS Paris-Web 2008 Paris-Web 2008 Thomas Parisot ( case.oncle-tom.net )
  2. 2. Plan <ul><li>Qu'est-ce qu'un framework CSS ? </li></ul><ul><li>Modules et fonctionnalités </li></ul><ul><li>Frameworks CSS majeurs </li></ul><ul><li>Comment choisir un framework ? </li></ul><ul><li>Cas pratique avec Blueprint </li></ul>
  3. 3. Qu'est-ce qu'un framework CSS ?
  4. 4. Qu'est-ce qu'un framework CSS ? <ul><li>Qu'est-ce qu'un framework ? </li></ul><ul><li>Base de travail extensible </li></ul><ul><li>Code réutilisable </li></ul><ul><li>Rail de développement </li></ul><ul><li>Outil de productivité </li></ul>
  5. 5. Qu'est-ce qu'un framework CSS ? <ul><li>OK mais pour les CSS ? </li></ul><ul><li>Fondations solides cross-browser </li></ul><ul><li>Classes prêtes à l'usage à T0 </li></ul><ul><li>Mise en page facilitée </li></ul><ul><li>Du rythme vertical </li></ul><ul><li>Des modules indépendants </li></ul><ul><li>Du temps de gagné dans vos projets </li></ul>
  6. 6. Modules et fonctionnalités
  7. 7. Modules et fonctionnalités <ul><li>Reset </li></ul><ul><li>Basés et/ou inspirés du reset.css d'Éric Meyer </li></ul><ul><li>Harmonise l'affichage pour tous les navigateurs </li></ul>
  8. 8. Modules et fonctionnalités <ul><li>Typographie </li></ul><ul><li>Règle ... la typographie </li></ul><ul><li>Complément idéal au reset.css </li></ul><ul><li>Très variable d'un framework à l'autre </li></ul>
  9. 9. Modules et fonctionnalités <ul><li>Grilles </li></ul><ul><li>Présentations en colonnes </li></ul><ul><li>Libres ou assistées </li></ul><ul><li>Largeur fixe, fluide ou élastique </li></ul>
  10. 10. Modules et fonctionnalités <ul><li>Impression </li></ul><ul><li>Optimise pour l'impression </li></ul><ul><li>Révèle l'URL des liens hypertextes </li></ul>
  11. 11. Modules et fonctionnalités <ul><li>Correctifs pour Internet Explorer </li></ul><ul><li>Intégrés ou en feuille(s) séparée(s) </li></ul><ul><li>Marges de colonnes </li></ul><ul><li>Annulation des flottants </li></ul><ul><li>Attribution du hasLayout </li></ul>
  12. 12. Modules et fonctionnalités <ul><li>Plugins </li></ul><ul><li>Feuilles additionnelles optionnelles </li></ul><ul><li>Des exemples ? </li></ul><ul><li>-> Right to left (RTL), </li></ul><ul><li>-> Liens sortants </li></ul><ul><li>-> Liens/boutons stylés </li></ul><ul><li>-> lightbox </li></ul><ul><li>-> etc. </li></ul>
  13. 13. Frameworks CSS majeurs
  14. 14. Frameworks CSS majeurs <ul><li>Blueprint </li></ul><ul><li>Complet </li></ul><ul><li>Facile </li></ul><ul><li>Largeur fixe (+ élastique via plugin ) </li></ul><ul><li>Compressor + configurateur </li></ul><ul><li>Reset + Grille + Typographie + IE + Formulaires + Print </li></ul>
  15. 15. Frameworks CSS majeurs <ul><li>Yahoo! CSS Fundation </li></ul><ul><li>Excellente documentation </li></ul><ul><li>Fluide ou fixe ou les 2 </li></ul><ul><li>Configurateur de grille en ligne (+ Autogrid ) </li></ul><ul><li>CDN ( Content Delivery Network ) </li></ul><ul><li>Nommage des classes difficilement mémorisable </li></ul><ul><li>Reset + Grille + Fonts + IE </li></ul>
  16. 16. Frameworks CSS majeurs <ul><li>Tripoli </li></ul><ul><li>Très facile </li></ul><ul><li>Purement axé typographie </li></ul><ul><li>Mise en forme pragmatique </li></ul><ul><li>Excellent compromis à Blueprint Typography </li></ul><ul><li>Reset + Typographie + Formulaires + IE </li></ul>
  17. 17. Frameworks CSS majeurs <ul><li>YAML ( Yet Another Multicolumn Layout ) </li></ul><ul><li>Relativement complet </li></ul><ul><li>Module navigation </li></ul><ul><li>Beaucoup d'exemples </li></ul><ul><li>Pas de grille </li></ul><ul><li>Reset + Navigation + Typographie + IE + Debug + Print </li></ul>
  18. 18. Frameworks CSS majeurs <ul><li>960 Grid System </li></ul><ul><li>Très très similaire à Blueprint </li></ul><ul><li>12 ou 16 colonnes </li></ul><ul><li>Intégration pour Fireforks, Omnigraffle, Photoshop et Visio </li></ul><ul><li>Reset + Grille + Fonts </li></ul>
  19. 19. Comment choisir un framework ?
  20. 20. Comment choisir un framework CSS ? <ul><li>Quelques questions à se poser </li></ul><ul><li>Largeur fixe ou fluide ? </li></ul><ul><li>Contexte graphique stable ou pas ? </li></ul><ul><li>Facilité d'utilisation </li></ul><ul><li>Exhaustivité de la documentation </li></ul><ul><li>Pérennité du projet </li></ul><ul><li>Rapport contraintes / avantages </li></ul><ul><li>Ressenti / Subjectivité </li></ul>
  21. 21. Comment choisir un framework CSS ? <ul><li>Situations à risques </li></ul><ul><li>Contexte graphique changeant </li></ul><ul><li>Incompréhension du code à utiliser </li></ul><ul><li>Trop de comportements standards à modifier </li></ul><ul><li>Allergie à la dénomination des classes </li></ul><ul><li>Collisions d'ID avec votre CMS (#col1, #col2 etc.) </li></ul>
  22. 22. Cas pratique avec Blueprint
  23. 23. Cas pratique avec Blueprint
  24. 24. Cas pratique avec Blueprint
  25. 25. Cas pratique avec Blueprint
  26. 26. Cas pratique avec Blueprint
  27. 27. Cas pratique avec Blueprint
  28. 28. Cas pratique avec Blueprint
  29. 29. Cas pratique avec Blueprint
  30. 30. Cas pratique avec Blueprint
  31. 31. Merci ;-) http://www.slideshare.net/oncletom/dveloppement-efficace-avec-les-frameworks-css-presentation/

×