SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 234 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Base CSS pour SPIP > Base CSS Pétronille 1

Base CSS Pétronille 1

15 novembre 2010 – par tetue – commentaires

14 votes

Début de framework CSS pour SPIP : Pétronille fournit une base de travail pour l’intégration, sous la forme d’un jeu de feuilles de style dynamiques et paramétrables, proposant les pré-réglages fondamentaux.

Préambule

Pétronille n’est pas un clicodrome sympa qui looke un site sans avoir besoin de coder, au contraire : c’est une base de travail pour l’intégration (framework).

Pétronille n’est pas compliquée, mais réclame quand même, comme n’importe quel frameworks CSS, un bon niveau en CSS, notamment une maîtrise de la cascade (ce qui est assez facile avec un outil comme Firebug).

Ceci n’est qu’une première version, qui permet de découvrir Pétronille, malgré quelques défauts, pour l’instant non résolus : fichiers de demo pas parfaitement fiables et fichiers CSS trop gourmands en ressources serveur.

Pétronille est conçue pour fonctionner avec tout type de site SPIP. Il est cependant déconseillé de l’activer sur un site déjà stylé : cela sera soit sans effet, soit contrariant. Pétronille vous mâche le travail : elle est donc pleinement utile employée en début de projet. Si elle vous embête, désactivez-la et recopiez seulement les bouts de code qui vous sont utiles dans votre propre feuille de style. Vous y reviendrez peut-être plus tard. Ou pas.

Comment utiliser Pétronille ?

  1. Pétronille s’installe comme n’importe quel plugin SPIP
  2. Activer Pétronille, qui insère automatiquement ses 5 feuilles de style
  3. Paramétrer Pétronille (facultatif) directement depuis l’espace privé
  4. Ajouter ensuite vos propres styles, en déposant vos feuilles CSS dans votre dossier « squelettes/css »
  5. Pour finir, n’oubliez pas d’activer, dans SPIP, la compression des fichiers CSS.

Nomenclature et ordre d’appel des fichiers

Aussitôt activée, Pétronille insère les fichiers présents qui portent ces noms (d’après la nomenclature de la méthode Daisy), en première position (avant #INSERT_HEAD et #INSERT_HEAD_CSS) et dans l’ordre suivant :

  1. reset.css : correction des styles par défaut (mise à zéro multinavigateurs)
  2. ?page=typo.css : base typographique, y compris raccourcis SPIP natifs
  3. form.css : base pour les formulaires (remplace l’historique spip_formulaires.css, très succinctement)
  4. spip.css : styles associés au code généré par SPIP (remplace l’historique spip_style.css)
  5. ?page=base.css : quelques classes facilitant la composition
  6. grid.css
  7. layout.css

Les feuilles reset.css, form.css et spip.css sont insérées par Pétronille. Vous pouvez les remplacer, en plaçant un fichier du même nom dans votre répertoire squelettes/css.

Les feuilles ?page=typo.css et ?page=base.css sont fabriquées puis insérées par Pétronille. Ce sont des « feuilles de styles calculées », paramétrables depuis l’espace privé. Il est techniquement possible, bien que déconseillé, de les remplacer : en plaçant un squelette nommé respectivement typo.css.html ou base.css.html à la racine de votre répertoire squelettes.

Les autres feuilles ne sont insérées que si elles existent, c’est-à-dire si vous placez des fichiers du même nom dans votre répertoire squelettes/css.

Vous compléterez en ajoutant vos propres styles dans les feuilles nommées librement, selon vos habitudes : screen.css et print.css, perso.css, habillage.css ou tout simplement style.css.

Prévisualisation : ?page=demo/typo

Pour vous aider à styler votre site, Pétronille met un fichier de demo à disposition, pour voir ce que vous faites. Affichez la page de test ?page=demo/typo ou mieux, insérez le modèle <charte|typo> dans un de vos articles, afin de voir cette charte typo en contexte.

Attention : cette page de test n’est pas dynamique. Elle affiche, de façon statique, des extraits de code généré par SPIP : cela n’est pas un échantillonnage représentatif des raccourcis SPIP de votre configuration ! Ce n’est qu’un exemple, pour vous inviter à créer votre propre charte typo, dynamique, avec des vrais raccourcis SPIP saisis dans les champs d’un article (voir cet exemple). Notez qu’une telle charte typo est incluse dans cette base de démarrage.

Attention : pour voir ce que fait Pétronille, désactivez toute autre feuille de styles, même habillage.css de la dist. Puis ré-activez-les une à une, pour voir lesquelles vous sont encore utiles. Dans tous les cas, n’utilisez pas spip_style.css !

Pré-réglages de Pétronille

Cette première version de Pétronille est configurable depuis l’espace privé (si l’un des plugins de config, CFG ou Bonux, est installé). Il est possible de régler quelques valeurs fondamentales, qui concernent essentiellement la typo, comme la famille de polices et la taille par défaut des textes, l’interlignage, les couleurs de texte et de fond, etc.

Configuration de Pétronille

Cette configuration est facultative : les valeurs par défaut de Pétronille permettent de commencer immédiatement. Vous pouvez donc travailler directement dans votre propre feuille de style et surcharger au cas par cas les valeurs qui ne sont pas satisfaisantes.

Il n’est pas possible de récupérer ces variables pour les ré-utiliser dans vos feuilles de styles — sauf à faire des feuilles de style calculées, ce qui n’est pas recommandé. Ces valeurs ne sont pas enregistrées en base : il faudra refaire la config à chaque migration.

Ne prenez pas trop l’habitude de ce panneau de config, qui peut être amené à disparaître dans une prochaine version : il n’est sensé servir qu’en phase de développement, où il facilite les essais, pour affiner les choix, ce qui est très appréciable. Il ne devrait pas servir ensuite et il n’est pas conseillé d’en modifier les valeurs ultérieurement : ce serait soit sans effet, soit contrariant.

Classes prédéfinies

Pour faciliter la mise en page en évitant de recoder les mêmes choses à chaque nouveau site, comme tout bon framework CSS, Pétronille met à disposition quelques classes prédéfinies, très modestes : .small, .p, .box, .first, .last, .center, .none, .clear et .clearfix). Pour en savoir plus, consultez l’article dédié : « Styles disponibles avec cette base CSS ».

Celles-ci viennent compléter les classes générées par SPIP, que Pétronille n’oublie pas de pré-styler, comme : .spip_logos, .spip_documents, ul.spip, div.spip, blockquote.spip, etc. Voir l’article dédié : « Styles générés par SPIP ».

Personnalisations possibles

Les feuilles de style de Pétronille utilisent quelques images, assez moches, qu’il est facile de remplacer en déposant un fichier du même nom dans votre répertoire « squelettes/css/img », sans oublier de recalculer les feuilles de style, (ou d’annuler via CSS) :

  • puce-li.gif met une puce aux listes (ul.spip)
  • puce-dt.gif met une puce aux items des listes de définition (dl.spip dt)
  • quote.gif affiche un guillemet aux citations (blockquote)

(In-)compatibilités particulières

Pour que les pages de demo fonctionnent avec les squelettes de type Z : déposer un fichier inc-head.html à la racine de votre dossier « squelettes », contenant cette seule ligne : <INCLURE{fond=inclure/head}>.

Le résultat est sans garantie, mais il est techniquement possible d’utiliser Pétronille avec des thèmes graphiques prédéfinis (Z ou autre). Elle peut être avantageusement complétée par d’autres frameworks CSS, notamment pour les formulaires ou la grille de composition.

Plugins recommandés, parce qu’ils facilitent l’utilisation de Pétronille : Navigation du privé et La trousse à têtue. Plugin qui complète bien Pétronille : Varicelle.

Prochaines évolutions

Cette version est explicitement numérotée comme étant la première car Pétronille est amenée à évoluer, pour deux raisons : les fichiers de démo et l’usage de feuilles de style calculées sont très insatisfaisants.

Les « feuilles de style calculées » sont des squelettes SPIP qui génèrent des feuilles de style, de façon dynamique, ce qui permet le paramétrage de certaines valeurs. Mais notez bien qu’elles ont l’inconvénient majeur de générer des hits supplémentaires au risque de plomber la perfo côté serveur. Il faudra donc trouver comment remplacer cette technique.

Le fichier de démo actuel non dynamique, n’est pas totalement fiable. Ce n’est qu’un gabarit HTML statique, alors qu’il faudrait afficher du texte saisi, avec ses raccourcis SPIP, dans les différents champs d’un article SPIP, de façon à tester le code réellement généré par SPIP. Mais comment partager ça ?

Pétronille est un petit framework CSS, en devenir, qui s’enrichira au fil du temps.

Voir en ligne : http://plugins.spip.net/basecss

P.-S.

Pour en savoir plus : sur les frameworks CSS ou sur la méthode Daisy.

Dernière modification de cette page le 26 septembre 2015

Retour en haut de la page

Vos commentaires

  • Le 15 novembre 2010 à 17:57, par yikat En réponse à : Pétronille 1

    Merci pour cette contrib attendue... et ainsi implémenter ta méthode Daisy.
    (Étant encore peu familier du développement css) j’aimerai comprendre quelle est, de part ton expérience, l’utililité/avantage d’utiliser ce framework en plugin via des squelettes dynamiques, plutôt qu’avec de simples feuilles css.

    • Le 15 novembre 2010 à 18:20, par tetue En réponse à : Pétronille 1

      Faire des feuilles de style calculées, en squelettes, était la seule façon de les rendre paramétrables, ce qui n’est pas possible avec du CSS pur. C’est juste de la bidouille en attendant de mieux faire, dans les prochaines versions de ce plugin, à n’en pas douter.

    Répondre à ce message

  • Le 15 novembre 2010 à 14:42, par BoOz En réponse à : Pétronille 1

    Ca a l’air super !

    Y’a t’il une grille (grid) conseillée pour aller avec ?

    • Le 15 novembre 2010 à 16:23, par tetue En réponse à : Pétronille 1

      Je ne pense pas que Pétronille propose jamais de grille, ni de layout, afin de laisser chacun libre d’utiliser celle de son choix.

      Prends celle que tu veux : The 1KB CSS Grid, celle de BluePrint ou d’ooCSS... Renomme-la grid.css, dépose cette feuille dans ton répertoire squelettes/css et roule ma poule. Il ne devrait y avoir aucun problème de compatibilité.

      Le but de Pétronille, c’est de faciliter la vie en intégration. Pas de proposer un énième carcan ;-)

    Répondre à ce message

  • Le 15 novembre 2010 à 16:05, par Loiseau2nuit En réponse à : Pétronille 1

    Testé et approuvé ! :-)

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là