Carnet Wiki

Petronille, un Framework CSS pour SPIP ZPIP

Version 4 — May 2010 — olivier

Présenté à la Troglo SPIP 2010 par Romy dans le cadre de la suite des ateliers “intégration web avec SPIP”

Prise de note collaboratives réalisée lors de l’intervention à fin de documentation (Davux, Loiseau2nuit)

Petronille : un Framework CSS pour SPIP, par Romy

ATTENTION , C’EST EXPERIMENTAL !

-* [Télécharger->http://files.org/spip-zone/petronille-dev.zip]
-* SVN: svn co svn://zone.spip.spip.org/spip-zone/_plugins_/petronille

Framework CSS, c’est quoi qu’est-ce ?

  • Une sorte de cadre/plan de travail multi-navigateur pour les intégrateurs HTML/CSS .
    -* pour les flemmards qui en ont marre de copier/.-* pour coller les flemmards qui en ont marre de copier-coller les mêmes bouts de code d’un site à l’autre (comme moi quoi :P )
  • Une sorte de BluePrint ou d’OOCSS mais en plugin et pour SPIP
  • Petronille pose la base de travail de tout intégrateur et propose un style par défaut des injecte directement tous les éléments visuels ( raccourcis SPIP ) auxquels sont supposés avoir accès les webmestres/rédacteurs pour la stylisation en CSS.

Sont traités :

  • tous les niveaux de titre
  • les paragraphes
  • les listes à puce
  • tableaux
  • enrichissements typo (dont certains issus de plugins)
  • des éléments HTML pourtant commun mais que tout le monde zappe parce que pas visible dans les barres typo
  • une feuille de route pour les formulaires

Tout est fait de manière à être le moins intrusif possible et à permettre le passage de n’importe qui dans le code derrière sans conflit.

En l’état du dev , Pétronille propose Propose :

  • un reset CSS
  • un fichier de charte typo
  • une base pour les formulaires ( pas entendu l’autre ... )

Utilisation

Appeler ces feuilles de style EN PREMIER dans le head de vos pages. (AVANT #INSERT_HEAD et avant vos CSS persos)

  • reset
    reset .css</code css</pre > : mise à zéro multinavigateurs
  • <code>typo pre>typo .css</code css</pre > : base typographique
  • <code>forms pre>forms .css</code css</pre > : base pour formulaires
  • <code>grid pre>grid .css</code css</pre > : éléments de composition

Pour utiliser toutes ces feuilles d’un coup, appelez seulement <code>petronille pre>petronille .css</code css</pre >

Il est déconseillé d’activer Pétronille sur un site déjà stylé : cela sera soit sans effet, soit contrariant. Pétronille vous prémâche le travail : elle n’est donc utile qu’employée dès le début.

Vos retours critiques sont bienvenus pour améliorer Pétronille : faites-moi part de vos habitudes et préférences !

ToDo

  • un article auto-générée de “charte typo” disponible dès l’install du plugin
  • intégrer une grille ? ou laisser cela aux frameworks connus qui font déjà ça très bien ?
    -* Risque de ne jamais aboutir a cause d’un problème de structure : Comme c’est un plugin, ya conflit avec insert_head.

Tour de table

  • Pourquoi le nom « Petronille » ? => Pour faire parler les curieux !