SPIPr

SPIPr est à la fois une famille de squelettes et un framework pour le développement front avec SPIP.

Prêt à l’emploi, thémable, responsive, et conçu dans une approche d’industrialisation et de développement rapide.

Documentation source : http://spipr.nursit.com

SPIPr regroupe 3 squelettes de base & 1 squelette multifonction :

  • SPIPr-dist
    Un squelette de départ pour construire un site à son goût.
  • SPIPr-blog
    Un squelette simple, orienté blog, sans arborescence de rubriques, avec une page d’archives.
  • SPIPr-doc
    Un squelette pour construire un site de documentation d’un projet.
  • SarkaSPIP v4
    Un squelette multifonction, hautement configurable pour construite un site riche sans coder.

Les squelettes SPIPr sont à la fois :

  • Industriels
    Conçu sur des composants solides et éprouvés, open source, qui favorisent la réutilisation et la maintenance : SPIP, Z, BootStrap, LayoutGala, LessCSS.
  • Thémables
    Un markup unifié et modulaire, un système de Layout interchangeable, les conventions de BootStrap enrichies de spécificités de SPIP qui permettent de réaliser des variantes d’habillage interchangeables.
  • Pour tous
    Les fonctionnalités Responsive de BootStrap et d’un Layout adaptable pour réaliser des sites qui s’adaptent à tous les écrans. Les moteurs de recherche trouveront aussi leur compte grâce aux markup HTML5 et aux micro-data.
  • Prêts à l’emploi
    La richesse des composants de BootStrap, la typographie accessible de SPIP, des listes d’objets modulaires, plusieurs variantes de squelettes, des thèmes disponibles. Tout est prêt pour démarrer très vite.

Discussion

48 discussions

  • 3

    Je suis parti à la découverte de SpipR pour le personnaliser. Il y a du boulot si on est un peu exigeant ! Je comprends peu à peu les leviers à actionner. Cependant, quand je vais me documenter sur les sites « officiels » de Bootstrap je constate que la version implémentée dans Spip (2.3.2) est obsolète et n’est plus maintenue. Il y a des tas de trucs intéressants à faire et à trouver pour la version 3 (et on annonce déjà une 4e mouture !). D’où quelques questions :

    -  Y a-t-il une compatibilité ascendante de SpipR pour les versions plus récentes de Bootstrap ?
    -  Si non, est-ce que SpipR va être adapté dans un avenir proche ?
    -  Existe-t-il des thèmes Bootstrap spécifiquement développés pour SpipR et qui peuvent servir de point de départ pour être modifiés ? (Donc pas des thèmes en plugin, mais en dossier pour squelettes/themes/mon-theme...)
    -  Le cas échéant, comment utiliser un thème Bootstrap 3 dans SpipR ?

    Merci d’avance
    Béat

    • Bonjour,

      en effet BootStrap 2.x n’est plus maintenue, mais cette version du framework à l’avantage d’assurer le support des anciens IE7 et IE8, ce qui n’est plus le cas de BootStrap 3.x et on aime bien assurer des transitions douces à nos utilisateurs dans le monde de SPIP et ne pas pousser à une course au modernisme effréné.

      Cela dit maintenant ça commence à devenir une contrainte moins forte, et une version basée sur BS3 est en cours de préparation. Pour tout dire c’est quasi fonctionnel, mais je n’ai pas tout a fait décidé du chemin de migration de BS2 vers BS3 : est-ce que je package les 2 versions de BootStrap dans un même plugin SPIP, tout en assurant que les sites existants ne soient pas modifiés lors de l’upgrade et continuent à utiliser BS2, ou est-ce que je fais un nouveau plugin SPIP pour BS3 et on pourra activer l’un ou l’autre avec SPIPr ?
      J’étais parti sur la première option pour avoir quelque chose de plus transparent possible pour les utilisateurs, mais j’ai vu que BS4 n’utilisera plus LESS mais SASS, il faudra donc un plugin SPIP séparé pour BS4, et du coup je pense que je vais basculer vers la seconde option.

      Bref, ça arrive, mais on prend le temps de bien réfléchir sur les choix de packaging et de release pour que tout ça reste simple et sur pour les utilisateurs et maintenable dans le temps.

      (en l’état non, il n’est pas possible d’utiliser un thème BS3 avec SPIPr)

    • Hello,

      Merci de ces précisions bien utiles. Je vois qu’il y a du suivi et cela me réjouit. Du coup, je me demande si je ne vais pas attendre un peu ;-)

      J’ai réalisé plusieurs sites avec Z, dont certains en responsive. L’évolution avec SpipR va dans le bon sens et me semble une bonne piste à suivre pour Spip. Les sites responsifs ne sont pas à la portée du premier venu, ceux que j’ai réalisés étaient souvent fragiles. Ici, on a affaire à quelque chose de très robuste, ce qui fait qu’on peut davantage se concentrer sur des aspects plus intéressants de la réalisation. L’industrialisation en soi n’est pas forcément utile à tout le monde, mais les facilités de mise en oeuvre que cela induit seront utiles à tous.

      Bonne continuation
      Béat

    • Bonjour,

      Je viens de passer quelques jours à jongler entre spipr et spip3.1 puis spip3.0 pour essayer de faire fonctionner l’agencement mais n’ai rien pu faire pour l’instant de stable (une erreur toujours apparaît dans l’espace public quand je suis déconnecté, mais pas quand je suis loggé... mystère).

      Est-ce qu’une nouvelle version de spipr est prochainement prévue, avec bootstrap 3 ? Autant peut-être attendre un peu... les débuts d’année sont souvent prolifiques ;-)

    Répondre à ce message

  • 1

    Bonjour,

    J’ai installé Spipr-dist sur un Spip 3.1.1 tout frais (wampserveur) mais cela me donne tout de suite des erreurs :
    « Fatal error : Maximum function nesting level of ’100’ reached, aborting ! in Monsite\plugins\auto\lesscss\v1.0.7\less.php\Less.php on line 5471 »

    Alors une idée de ce que je pourrais faire ?
    Merci beaucoup par avance.

    • Dans le fichier config/mes_options.php (à créer s’il n’existe pas) coller :

      <?php
          ini_set('xdebug.max_nesting_level', 200);
      ?>

      En général ça fonctionne assez bien...

    Répondre à ce message

  • 3

    Bonjour,
    J’utilise spipr pour 1 site, et je traque les erreurs de css.
    sur mon site j’ai une erreur de background-color pour la classe .navbar-inverse
    Horodatage : 09/02/2016 00:00:20
    Avertissement : Une fin de valeur était attendue, mais « \9 » a été trouvé. Erreur d’analyse de la valeur pour « background-color ». Déclaration abandonnée.
    Fichier Source : http://www.marseillereiki.com/local/cache-less/bootstrap-cssify-76341ca.css?1454970635
    Ligne : 6556, Colonne : 28
    Code Source :
    background-color : #590041 \9 ;
    Comme j’ai modifié mon thème, je croyais en être à l’origine. je n’ai rien trouvé de probant. J’ai voulu vérifier sur le site du plugin. Il y a le même type d’anomalie


    Horodatage : 08/02/2016 23:37:45
    Avertissement : Une fin de valeur était attendue, mais « \9 » a été trouvé. Erreur d’analyse de la valeur pour « background-color ». Déclaration abandonnée.
    Fichier Source : http://spipr.nursit.com/local/cache-css/9d18593d6eae53d110f58711fca244f2.css
    Ligne : 1216, Colonne : 92
    Code Source :
    .navbar-inverse .btn-navbar:active,.navbar-inverse .btn-navbar.activebackground-color :#000 \9


    comment corriger le problème ?

    Merci

    • Bonjour,

      ce n’est pas un bug ni un problème, c’est un hack CSS utilisé par BootStrap 2 pour que certaines directives CSS ne soient comprises que par IE7 et IE8, pour corriger des défauts de comportement de ces 2 anciens navigateurs.

      Il faut donc laisser tel quel.

    • merci, Il y en a beaucoup comme ça ?

    • Des gens qui surfent sur IE7 ou IE8 ?
      Le dernier a lâché l’affaire il y a 5 ans...

    Répondre à ce message

  • Bonjour,

    Je constate que l’affichage au format paysage sur les iPhone 3, 4 ,5 est déficient. Sur le modèle 6 c’est bon. Le problème est que les typos et leurs interlignes s’affichent plus petits que dans la version portrait. En plus de rendre difficilement lisibles certains textes, cela peut conduire dans certains cas à de gros problèmes de mise en page. Je n’ai pas pu tester sur d’autres marques de smartphones.

    J’utilise Firefox Developer Edition (à jour) qui ne reproduit pas le problème. Pour moi il doit s’agir d’un bug de « bas niveau » dans SpipR car même le site spipr.nursit.com produit les mêmes effets ;-)

    Qu’est-ce qu’on peut faire ?

    Répondre à ce message

  • Bonjour,

    Les éléments qui sortent du flux, typiquement quand ils sont en position : fixed, présentent une typographie dégradée sur Webkit (Safari)

    Les textes perdent du « gras » et avec une typo assez fine, en négatif, cela devient critique pour la lisibilité.

    J’ai beau chercher avec l’inspecteur web, je ne vois pas quel style css pourrait redonner à ces textes la même apparence que quand ils sont dans le flux normal…

    Merci de vos lumières

    Répondre à ce message

  • 2

    Vivement le thème en Bootstrap 3 surtout pour les belles icônes en vectoriel et tout le reste…
    Je galère en ce moment pour un simple truc, un aside particulier pour un numéro d’article en particulier… je n’ai pas reussi, des idées ?

    • Idem pour moi.

      J’attends BOOTSTRAP 3 pour SPIPR avec impatience car il y a plein de classes sympas par rapport à la V2.

    • Hello Cerdic

      BOOTSTRAP 3 est-il pris en compte dans la dernière version de SPIPr ?

    Répondre à ce message

  • 1

    Bonjour,

    J’ai pu faire fonctionner SPIPr et j’ai pu notamment créer un squelette (inspiré de SPIRr-dist) et un thème (inspiré de Beige) que l’on peut voir en action ici : http://perquisition.fr/

    Je contribuerai d’ailleurs prochainement en proposant des squelettes et des thèmes SPIPr, en restant le plus générique possible.

    Cependant à l’occasion de la prise en main de SPIPr je n’ai pas pu faire fonctionner le mécanisme de menus déroulants au clic qui se plient et qui se déplient, à l’image de la démo que l’on retrouve ici : http://spipr.nursit.com/?page=demo1

    Même en intégrant les classes manquantes en me servant de la démo (en modifiant le plugin Menu pour qu’il génère le tout à la volée), et même en insérant dans le head les fichiers javascripts suivants : bootstrap/js/bootstrap-dropdown.js et bootstrap/js/menu.dropdown.js, je n’ai pas pu reproduire le dit fonctionnement.

    Existe-t-il une solution simple pour reproduire ce fonctionnement avec donc des menus déroulants au clic ?

    Une solution bien-sûr de préférence qui utiliserait ce qui est déjà disponible dans le plugin BootStrap.

    En vous remerciant pour cette distribution très bien pensée, et merci pour une éventuelle solution.

    • Bonjour,

      Et bien finalement je me réponds à moi-même car j’ai trouvé la solution sur [SPIP Zone] :
      https://www.mail-archive.com/spip-zone@rezo.net/msg39461.html

      Donc pour faire simple, si vous utilisez le squelette SPIPr-dist il vous suffit de coller dans le fichier head_js/dist.html (vide d’origine) le code suivant :

      [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-dropdown.js})"></script>] 
      [<script type="text/javascript" src="(#CHEMIN{js/dropdowns-enhancement.js})"></script>] 
      [<script type="text/javascript" src="(#CHEMIN{js/menu.dropdown.js})"></script>]

      Et si à l’aide du plugin Menu vous avez bien créé un menu avec l’identifiant barrenav et avec des sous-menus, ces derniers se déplieront ou se replieront dorénavant au click.

      On finit toujours par y arriver ! Vive SPIPr et bonne journée !

    Répondre à ce message

  • 4

    Bonsoir,

    j’utilise SPIP 3.0.17 [21515] + Sarka-SPIP Reloaded 4.5.3 et je n’arrive plus à changer le slogan du site. Je passe par le menu SPIP Configuration/identité du site mais la mise à jour du formulaire pour le champ slogan (moins de 255 caractères) n’entraine aucun changement.

    Je suis hébergé par en multi OVH.

    Merci pour votre aide.

    • Bonjour
      Sur ton ancienne version de sarka, as-tu enregistré ta configuration, notamment maintenance/bandeau ? Si elle est active sur ton nouveau sarka, elle prend le pas sur le slogan déclaré dans « identité du site ».

    • Bonsoir et merci Bobpat
      donc il suffit d’enregistrer la nouvelle configuration pour qu’elle soit prise en compte
      c’est cela ?

    • Bonsoir
      Dans la version 4.5.3, le slogan n’est pas modifiable dans l’espace privé/squelette/sarka/bandeau comme dans l’ancienne version ; il faut aller par FTP dans tmp/sarkaspip/config/bandeau xxx txt (si tu as enregistré ta configuration avec l’ancienne version !) où tu peux modifier ton slogan.
      Pour l’activer, tu vas dans ton espace privé/squelette/sarka/maintenance/restauration de configuration/bandeau et choisir le fichier que tu as modifié par FTP.
      C’est moins pratique qu’avec l’ancienne version...

    • Merci Bobpat,
      ça fonctionne en suivant tes indications, les modifs en FTP du fichier de configuration sont bien prises en compte.

      Bonne Journée

    Répondre à ce message

  • Bonsoir et merci Bobpat
    donc il suffit d’enregistrer la nouvelle configuration pour qu’elle soit prise en compte
    c’est cela ?

    Répondre à ce message

  • Bonjour, je suis de retour ;-)

    Je fabrique un thème à partir de SpipR : tout à l’air facile au début et on peut aisément faire des petites modifs comme changer des couleurs et agir sur la typographie. Pour aller plus loin et agir par exemple sur l’apparence et le comportement de la barre de navigation, c’est une tout autre affaire ! J’ai beau éplucher les explications, je ne trouve pas grand chose… J’ai l’habitude du comportement de Z, mais ici, pour surcharger des fichiers html de squelettes, je ne retrouve évidemment pas le balisage utilisé par Bootstrap et .less ! À partir des fichiers .less, j’ai essayé d’agir sur tout ce qui me semblait logique, mais rarement suivi d’effets.

    Par exemple :
    -  Pour les écrans de grand format, comment régler la largeur de la barre de nav selon la largeur définie dans la balise page (sans qu’elle ne s’étale sur toute la largeur de la fenêtre) ? Ça à l’air bête, mais je n’y arrive pas.
    -  Pour les petites tailles d’écran, comment faire disparaitre les libellés des rubriques et les remplacer par une icône de menu déroulant (collapse) ?

    Merci d’avance

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom