Développement efficace avec les frameworks CSS

Embed Size (px)

Citation preview

  • 1. Dveloppement efficace avec les frameworks CSS Paris-Web 2008 Paris-Web 2008 Thomas Parisot ( case.oncle-tom.net )

2. Plan

  • Qu'est-ce qu'un framework CSS ?
  • Modules et fonctionnalits
  • Frameworks CSS majeurs
  • Comment choisir un framework ?
  • Cas pratique avec Blueprint

3. Qu'est-ce qu'un framework CSS ? 4. Qu'est-ce qu'un framework CSS ?

  • Qu'est-ce qu'un framework ?
  • Base de travail extensible
  • Code rutilisable
  • Rail de dveloppement
  • Outil de productivit

5. Qu'est-ce qu'un framework CSS ?

  • OK mais pour les CSS ?
  • Fondations solidescross-browser
  • Classes prtes l'usage T0
  • Mise en page facilite
  • Du rythme vertical
  • Des modules indpendants
  • Du temps de gagn dans vos projets

6. Modules et fonctionnalits 7. Modules et fonctionnalits

  • Reset
  • Bass et/ou inspirs du reset.css d'ric Meyer
  • Harmonise l'affichage pour tous les navigateurs

8. Modules et fonctionnalits

  • Typographie
  • Rgle ... la typographie
  • Complment idal au reset.css
  • Trs variable d'un framework l'autre

9. Modules et fonctionnalits

  • Grilles
  • Prsentations en colonnes
  • Libres ou assistes
  • Largeur fixe, fluide ou lastique

10. Modules et fonctionnalits

  • Impression
  • Optimise pour l'impression
  • Rvle l'URL des liens hypertextes

11. Modules et fonctionnalits

  • Correctifs pour Internet Explorer
  • Intgrs ou en feuille(s) spare(s)
  • Marges de colonnes
  • Annulation des flottants
  • Attribution du hasLayout

12. Modules et fonctionnalits

  • Plugins
  • Feuilles additionnelles optionnelles
  • Des exemples ?
  • -> Right to left(RTL),
  • ->Liens sortants
  • ->Liens/boutons styls
  • ->lightbox
  • ->etc.

13. Frameworks CSS majeurs 14. Frameworks CSS majeurs

  • Blueprint
  • Complet
  • Facile
  • Largeur fixe (+ lastique viaplugin )
  • Compressor+ configurateur
  • Reset + Grille + Typographie + IE + Formulaires + Print

15. Frameworks CSS majeurs

  • Yahoo! CSS Fundation
  • Excellente documentation
  • Fluide ou fixe ou les 2
  • Configurateur de grille en ligne (+Autogrid )
  • CDN ( Content Delivery Network )
  • Nommage des classes difficilement mmorisable
  • Reset + Grille + Fonts + IE

16. Frameworks CSS majeurs

  • Tripoli
  • Trs facile
  • Purement ax typographie
  • Mise en forme pragmatique
  • Excellent compromis Blueprint Typography
  • Reset + Typographie + Formulaires + IE

17. Frameworks CSS majeurs

  • YAML ( Yet Another Multicolumn Layout )
  • Relativement complet
  • Modulenavigation
  • Beaucoup d'exemples
  • Pas de grille
  • Reset + Navigation + Typographie + IE + Debug + Print

18. Frameworks CSS majeurs

  • 960 Grid System
  • Trs trs similaire Blueprint
  • 12 ou 16 colonnes
  • Intgration pour Fireforks, Omnigraffle, Photoshop et Visio
  • Reset + Grille + Fonts

19. Comment choisir un framework ? 20. Comment choisir un framework CSS ?

  • Quelques questions se poser
  • Largeur fixe ou fluide ?
  • Contexte graphique stable ou pas ?
  • Facilit d'utilisation
  • Exhaustivit de la documentation
  • Prennit du projet
  • Rapport contraintes / avantages
  • Ressenti / Subjectivit

21. Comment choisir un framework CSS ?

  • Situations risques
  • Contexte graphique changeant
  • Incomprhension du code utiliser
  • Trop de comportements standards modifier
  • Allergie la dnomination des classes
  • Collisions d'ID avec votre CMS (#col1, #col2 etc.)

22. Cas pratique avec Blueprint 23. Cas pratique avec Blueprint 24. Cas pratique avec Blueprint 25. Cas pratique avec Blueprint 26. Cas pratique avec Blueprint 27. Cas pratique avec Blueprint 28. Cas pratique avec Blueprint 29. Cas pratique avec Blueprint 30. Cas pratique avec Blueprint 31. Merci ;-) http://www.slideshare.net/oncletom/dveloppement-efficace-avec-les-frameworks-css-presentation/