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 !
- SVN :
svn co svn://zone.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-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 é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 :
- un reset CSS
- un fichier de charte typo
- une base pour les formulaires
Utilisation
Appeler ces feuilles de style EN PREMIER dans le head de vos pages. (AVANT #INSERT_HEAD et avant vos CSS persos)
-
reset.css
: mise à zéro multinavigateurs -
typo.css
: base typographique -
forms.css
: base pour formulaires -
grid.css
: éléments de composition
Pour utiliser toutes ces feuilles d’un coup, appelez seulement petronille.css
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 !
-* Oui, si ça aboutit, ça pourrait constituer les feuilles de style par défaut de la dist de SPIP...