Méthode CSS modulaire Daisy

Post on 09-Jun-2015

2.288 views 2 download

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.

Transcript of 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)

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

C'est le

Super

Souk !

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

Continuerà coderchaqueprojetde zéro...

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

Adopter unframeworkCSS ?

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é

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

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

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

au particulier

Du général

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

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

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

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

en développement en production

styles.css

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