Méthode Daisy                    (marguerite)




                              par Romy Duhem-Verdière
Méthode Daisy : le...
C                'est le

S               uper

S               ouk !

Méthode Daisy : les CSS feuille à feuille — Romy Du...
Continuer
à coder
chaque
projet
de zéro...




Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web...
Adopter un
framework
CSS ?




Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010   4
Adopter un
    framework
    CSS ?


✔
    Trousse de
    feuilles de style
✔
    Socle multi navigateurs
✔
    Classes pr...
Adopter un
    framework
    CSS ?




✔
    Temps d'apprentissage
✔
    Code externe, inconnu
✔
    Non sémantique
✔
    ...
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010   7
Du général




                                                                 au particulier
Méthode Daisy : les CSS feu...
reset

charte typographique
                 formulaires

      rythme, grille
     positionnement des
    blocs principau...
reset                        reset.css

charte typographique                             typo.css
                 formula...
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010   11
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010   12
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010   13
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010   14
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010   15
en développement                                                      en production




                                  ...
Merci !




                                http://romy.tetue.net/methode-daisy


Crédits photo : diapo 2 CC by-nc confide...
Prochain SlideShare
Chargement dans…5
×

Méthode CSS modulaire Daisy

3 296 vues

Publié le

Produire le style CSS d'un site en équipe est souvent galère. Améliorez ça, en répartissant le code en différentes feuilles conventionnelles, indépendantes et interchangeables.

Publié dans : Technologie, Formation
  • Soyez le premier à commenter

Méthode CSS modulaire Daisy

  1. 1. Méthode Daisy (marguerite) par Romy Duhem-Verdière Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 Paris Web 2010 1
  2. 2. C 'est le S uper S ouk ! Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2
  3. 3. Continuer à coder chaque projet de zéro... Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 3
  4. 4. Adopter un framework CSS ? Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 4
  5. 5. Adopter un framework CSS ? ✔ Trousse de feuilles de style ✔ Socle multi navigateurs ✔ Classes prêtes à l'emploi ✔ Harmonie graphique ✔ Temps gagné Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 5
  6. 6. Adopter un framework CSS ? ✔ Temps d'apprentissage ✔ Code externe, inconnu ✔ Non sémantique ✔ Carcan contraignant Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 6
  7. 7. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 7
  8. 8. Du général au particulier Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 8
  9. 9. reset charte typographique formulaires rythme, grille positionnement des blocs principaux styles génériques variantes par gabarits Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 9
  10. 10. reset reset.css charte typographique typo.css formulaires forms.css rythme, grille positionnement des grid.css blocs principaux layout.css styles génériques skin.css variantes par gabarits pages.css Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 10
  11. 11. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 11
  12. 12. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 12
  13. 13. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 13
  14. 14. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 14
  15. 15. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 15
  16. 16. en développement en production styles.css Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 16
  17. 17. Merci ! http://romy.tetue.net/methode-daisy Crédits photo : diapo 2 CC by-nc confidence, comely ; diapo 3 CC by-nc-nd bleu celt ; diapo 4 CC by-sa ARBRE ÉVOLUTION. Merci à Coopaname, à Sébastien Bloc de Modddjo, à Cyril Marion des Ateliers CYM, à Sophie fONfEk, à Fil et Anne des troglos, à SPIP, à Hugues Moreno, à Marie Ototoï, aux W3Cafés, à Paris Web et à tous vos retours d'expérience en intégration. Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 17

×