17
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 1 Méthode Daisy par Romy Duhem-Verdière Paris Web 2010 (marguerite)

Méthode CSS modulaire Daisy

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 1

Méthode Daisy

par Romy Duhem-VerdièreParis Web 2010

(marguerite)

Page 2: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2

C'est le

Super

Souk !

Page 3: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 3

Continuerà coderchaqueprojetde zéro...

Page 4: Méthode CSS modulaire Daisy

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

Adopter unframeworkCSS ?

Page 5: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 5

Adopter unframeworkCSS ?

✔ Trousse de

feuilles de style

✔ Socle multi navigateurs

✔ Classes prêtes à l'emploi

✔ Harmonie graphique

✔ Temps gagné

Page 6: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 6

Adopter unframeworkCSS ?

✔ Temps d'apprentissage

✔ Code externe, inconnu

✔ Non sémantique

✔ Carcan contraignant

Page 7: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 7

Page 8: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 8

au particulier

Du général

Page 9: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 9

reset

charte typographique

formulaires

positionnement des

blocs principaux

rythme, grille

variantespar gabarits

styles génériques

Page 10: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 10

forms.css

layout.css

grid.css

reset.css

typo.css

pages.css

skin.css

reset

formulaires

positionnement des

blocs principaux

rythme, grille

variantespar gabarits

styles génériques

charte typographique

Page 11: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 11

Page 12: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 12

Page 13: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 13

Page 14: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 14

Page 15: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 15

Page 16: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 16

en développement en production

styles.css

Page 17: Méthode CSS modulaire Daisy

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 17

Merci !

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.

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