Utilisez le framework Foundation dans vos squelettes !

Publié le : 13 août 2013 – Dernière modification le 21 décembre 2021 – par Phenix – 124 commentaires

1
2
3
4
5
31 votes

Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement !


Ce plugin ajoute le framework Foundation sur l’espace public de SPIP. Les éléments Javascripts sont désactivés par défaut.

Avertissement :

J’ai déjà résolu pas mal de conflits entre le CSS par défaut de SPIP et celui de Foundation, mais il se peut qu’il y en ait encore. N’hésitez pas à proposer vos améliorations !

Filtre disponible.

Ce plugin ajoute |iframe_responsive.
Ce filtre va rechercher et rendre responsive les iframes qu’il trouve, selon une méthode CSS incompréhensible, mais qui fonctionnent.

Ce filtre utilise la méthode flex de Foundation depuis la version 1.4.
Le filtre détectera tout seul si la class .vimeo à besoin d’être ajouté.

Foundation s’accompagne de nombreux outils supplémentaires comme des tooltips, des boutons responsives, des menus, etc.

Voir la doc complète de Foundation.

La surcharge de Foundation

Attention : La version 2.0 déplace les versions de Foundation dans un dossier lib/ afin de mieux respecter la nomenclature de SPIP. Il faut donc surcharger Foundation via le dossier squelettes/lib/ !

Par défaut, Foundation charge le fichier CSS complet de foundation.

Cependant, si vous utilisez directement la version SASS de Foundation ou si vous utilisez le générateur du site pour créer une version personnalisée, vous pouvez surcharger la version du plugin en créant squelettes/foundation/foundation-4 ou squelettes/foundation/foundation-3 selon votre version.

Placer simplement le contenu du fichier zip téléchargé dans ce dossier et cette version remplacera celle du plugin :

Plugins conseillés

Dans la version 1.4.1, la dépendance à Zpip a été supprimée pour laisser plus de liberté aux développeurs.
Néanmoins, je ne saurais que trop vous conseiller Z-core qui est compatible avec Foundation.

Mise à jour vers la version 1.5.0

Si vous passez de la version 1.4.2 à la version 1.5.0, il est possible que votre site s’affiche mal par la suite.
Cette version respecte mieux les autres plugins et les différents squelettes Z. Du coup il est fort possible que des fichiers CSS qui ne se chargeait pas correctement, se charge à présent.
Pensez donc à vérifier que la balise #INSERT_HEAD se trouve bien AVANT votre fichier CSS, dans le cas contraire, les styles de Foundation deviendraient vos styles de base.

La version 1.6.2 corrige ce problème en séparant le CSS et le JavaScript dans les bons pipelines.

La balise #COLONNES (version 1.7)

La version 1.7 ajoute une balise #COLONNES. Son but est de simplifier l’écriture de class Foundation. Cela fonctionne ainsi :

#COLONNES{nombre, type}

Nombre : Le nombre de colonnes souhaité.
Type (optionnel, Foundation 4 et 5 seulement) : le type de colonne.

Exemple :

#COLONNES{4, large}

Donnera « large-4 columns » sous Foundation 4 et 5.
Ou « four columns » sous Foundation 2 et 3.

Le but de cette balise est de dynamiser la gestion des colonnes et de faciliter les changements de version de Foundation.

Depuis la version 2.0, la balise colonne accepte un tableau en paramètre dont les index correspondent au nombre de colonnes.

[(#REM) Ancienne syntaxe dépréciée dans la version 2.2.6 ]
#COLONNES{#ARRAY{3,large, 4,medium, 12, small}} (Déprécié !)

[(#REM) Nouvelle syntaxe ]
#COLONNES{#ARRAY{large,3, medium,4, small,12}}

Donnera « large-3 medium-4 small-12 columns ».

Dans le cas ou cette syntaxe serait utilisé dans foundation 3 ou 2, c’est l’index le plus grand qui servira à déterminer la taille de la colonne.

La balise #ORBIT et son modèle (version 1.8)

Le composant Orbit à été déprécier et ne sera plus présent dans le version 6 de Foundation

La version 1.8 de Foundation facilite l’intégration d’Orbit dans les squelettes SPIP.

Ce modèle utilisera les images attachées à un objet SPIP pour créer un SlideShow.

Utilisation du modèle

Le modèle offre une variété d’options pour intégrer Orbit :

  • id_article : identifiant d’un article.
  • id_rubrique : identifiant d’une rubrique.
  • id_objet : identifiant d’un objet SPIP.
  • objet : type d’objet SPIP.
  • class : class CSS supplémentaire pour la balise ul.
  • data-options : options JavaScript d’Orbit.
  • largeur : Largeur des images du slideshow (960px par défaut).
  • hauteur : Hauteur des images du slideshow (0 par défaut, les images ne seront pas déformées).
  • couleur : Couleur pour le filtre http://www.spip.net/fr_article3327.... (transparent par défaut).

Comme tout les modèles, il est utilisable dans un article SPIP. Dans ce cas, l’id_article sera automatiquement pris en compte.

La balise #ORBIT

La balise Orbit est destinée à faciliter l’utilisation du modèle dans les squelettes.

La structure est simplifiée :

#ORBIT{objet, id_objet, data-options, class}

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

28 discussions

  • 2
    rjadot

    Merci pour ce plugin :)

    Petite quetion, le plugin bootstrap inclut des feuilles de styles bootstrap2spip pour utiliser les styles des polices de spip qui sont mieux travaillées, est-ce que le plugin foundation le fait aussi ?

    • Phenix

      Hello,

      Non, je pars du principe que si tu installes Foundation, tu veux aussi utiliser les styles typographiques de Foundation : http://foundation.zurb.com/docs/components/typography.html.

      Cependant, en utilisant la Gem Ruby, tu peux compiler une version de Foundation sans la typographie, et donc garder le comportement par défaut de SPIP.

      J’espère que cela correspond à ce que tu recherches.

    • rjadot

      Salut, je viens de me rendre compte que j’avais oublié de valider la prévisualisation de ma réponse, du coup je recommence : merci, un peu tard :)

      La réponse me convient parfaitement.

      Raphaël

    Répondre à ce message

  • 2
    jules

    Bonjour à tous,

    Merci pour cette adaptation qui facilite le développement.

    Dans quel fichier faut-il ajouter ses css personnalisés. Je pensais qu’un fichier perso.css das le repertoire css de squelette ferait l’affaire. Mais hélàs.

    • Phenix

      Hello,

      Cela dépend du squelette que tu utilises, ce plugin ne fait que charger des éléments en plus via la balise #INSERT_HEAD_CSS.
      Regarde ce qui est prévu dans inclure/head.html au niveau de fichier css.

    • jules

      Merci Phenix,

      Il fallait créer un fichier perso.css dans le repertoire css effectivement. Ça marche nickel.

    Répondre à ce message

  • 3
    Fa_b

    Salut

    Alors concernant foundation 5 et spip 3.1 (en dev), le mécanisme de surcharge n’est plus : squelettes/foundation/foundation-5 mais squelettes/lib/foundation-5.

    Voilà, donc peut-être ajouter une correction pour éviter de perdre 1h à chercher ;)

    • Phenix

      Hello,

      Ce n’est pas lié à SPIP 3.1.
      Depuis la version 2.0 du plugin, la surcharge ce fait via le dossier lib/.

      Comme l’explique la note qui est placée en dessous l’image illustrant la surcharge :

      Attention : La version 2.0 déplace les versions de Foundation dans un dossier lib/ afin de mieux respecter la nomenclature de SPIP.

      J’avoue cependant qu’elle devrait ce trouver au dessus et être plus significative. Je vais modifier.

    • Fa_b

      héhé ok, désolé j’avais pourtant lu mais j’avais pas relevé.
      Cela étant entre le nom du plugin Foundation-4-spip qui utilise foundation 5 (entre autres) mais qui s’appelle foundation v2.3.15… Ca fait de la confusion de nombres surtout quand on démarre avec ce framework. Merci en tout cas et bravo pour le résultat.

    • Phenix

      Cela étant entre le nom du plugin Foundation-4-spip qui utilise foundation 5 (entre autres) mais qui s’appelle foundation v2.3.15… Ca fait de la confusion de nombres surtout quand on démarre avec ce framework.

      Effectivement, je n’y avais jamais vraiment pensé. Autant le nom, pourquoi pas, autant je ne suis pas certain que le plugin doivent suivre la version de Foundation étant donné qu’il en supporte plusieurs et qu’il possède des fonctionnalité spécifique.
      Peut être que je vais le renommer en « Foundation » tout simplement.

    Répondre à ce message

  • 7
    Pierre KUHN

    Bonjour,

    Tu as un site exemple ou peut voir le squelettes ou pas ?
    Je suis entrain de le monter sur un spip 3.1 et je cherche à le mettre en place ;

    Répondre à ce message

  • 1
    soon7

    Hello,

    J’ai remarqué un truc avec #COLONNES, c’est que si on a d’autres class dans l’élément ou on s’en sert, il mange un espace devant lui.
    par exemple

    <div class="#COLONNES{12,large} bloc_radio">
    va ramener
    <div class="large-12 columnsbloc_radio">

    Y’aurait moyen d’arranger ça svp ? parce que systématiquement ça me fait changer l’ordre des classes, je suis obligé d’appeler #COLONNES en dernier parmi mes classes

    • Phenix

      Hello,

      Avec :

      <div class="[(#COLONNES{12,large})] bloc_radio">

      Cela devrait fonctionner sans problème. Cela permet a SPIP de savoir quand traiter une chaine ou non.

    Répondre à ce message

  • 8
    soon7

    hello,

    est ce que ce plugin intègre la « toute » derniere de foundation, càd la 5

    • Phenix

      Hello,

      Oui, le plugin intègre Foundation 5, cela a été ajouté dans la version 1.6 :

      http://zone.spip.org/trac/spip-zone/changeset/78781/_plugins_/foundation-4-spip/trunk

      La seule version qui manque encore à l’appel, c’est la version 2. Mais mon petit doigt me dit qu’elle devrait arriver sous peu :)

    • soon7

      Hello,

      Merci pour ta réponse ! en installant le plugin j’ai effectivement vu qu’il y avait la version 5. Je me suis servi sur plusieurs projets de foundation et spip « à la mano » et franchement c’es cool.
      Là je suis en train de me mettre à zpip, et le mieux serait de faire mes zpip avec foundation. J’ai donc installé zpip plus ton plugin, mais je n’arrive pas à faire fonctionner un simple orbit :http://www.domtomnews.com/v3/?var_mode=recalcul
      J’ai bien mon theme qui est activé, foundation.min.js est bien appelé, les styles foundations sont bien là, et j’ai surchargé jquery dans le thème pour appeler en partie publique la bonne version de jquery (qui est en fait une copie du jquery du foundation 5, à savoir la 2.0.3) et pourtant mon orbit ne tourne pas. ça te dit quelque chose ce genre de truc ?

    • Phenix

      Hello,

      J’aurai d’abord tenté de la faire sans surcharger jQuery, car tu as des erreurs JavaScript sur ta page.

      Si le JavaScript de foundation 5 n’est pas compatible avec la version de jQuery de SPIP, cela va poser un problème.

      Dis-moi ce que cela donne.

    • soon7

      Alors ça marche toujours pas mais j’avance. L’erreur de base vient d’un bug de foundation, qui sera corigé dans la 5.0.3 (http://stackoverflow.com/questions/20151896/foundation-5-possible-bug-uncaught-typeerror-layer-must-be-a-document-node-fo)
      J’ai récupéré le bon code sur github et c’est déjà en place.
      En surchargeant jquery je n’ai plus d’erreur mais toujours pas orbit T-T je continue à chercher !
      et bien sur en foundation 4 ça marche sans souci !

    • tcharlss

      Bonjour,
      Juste pour confirmer que de mon côté, orbit fonctionne avec Foundation 5.0 + jquery 1.7.x de SPIP. D’ailleurs dans l’ensemble, les plugins javascript de foundation 5 fonctionnent plutôt correctement avec le jquery de SPIP, à quelques petits détails prêt.

      Après je n’ai pas regardé en détail comment le plugin s’y prend, est-ce que les scripts Foundation sont chargés dans l’ordre et aux endroits indiqués ici : http://foundation.zurb.com/docs/javascript.html ?
      Par exemple d’après mes essais, si le script qui initialise Foundation n’est pas placé en fin de document, ça occasionne pleins de problèmes.

    • Phenix

      Après je n’ai pas regardé en détail comment le plugin s’y prend, est-ce que les scripts Foundation sont chargés dans l’ordre et aux endroits indiqués ici : http://foundation.zurb.com/docs/javascript.html ?

      J’utilise les balises #INSERT_HEAD et #INSERT_HEAD_CSS.

      Par exemple d’après mes essais, si le script qui initialise Foundation n’est pas placé en fin de document, ça occasionne pleins de problèmes.

      Voilà une bonne piste, le plugin charge le JavaScript de foundation dans le head.

      Je ne vois pas comment réaliser cela automatiquement avec le plugin, pour le moment, une idée serait de décocher l’option JavaScript du plugin pour le charger à la main avant

    • tcharlss

      D’après leur indication, il faudrait charger le script foundation.min.js suivi du script d’initialisation à la fin, juste avant le tag fermant </body>. Mais bon, il n’y a pas de pipeline spécifique pour ça.
      Le compromis que je fais consiste à couper la poire en 2 :
      -  Charger le script foundation.min.js dans le head via la pipeline insert_head, comme c’est le cas actuellement.
      -  Placer en revanche le script d’initialisation à la fin du document via la pipeline affichage_final. Par ex. :

      function foundation_affichage_final ($flux) {
$js = "<script>$(document).foundation();</script>\n";
$pos_body = strpos($page, '</body>');
return substr_replace($flux, $js, $pos_body, 0);
}
    • Phenix

      J’ai réussi à faire fonctionner orbit, sans avoir a tout mettre avant le

    Répondre à ce message

  • 1
    casp

    J’utilise foundation mais à la main pour le moment.
    Je préfère prendre ce qui’ m’intérèsse et le mixer à ma sauce, car dans l’ensemble je trouve les css et javascript de bootstrap et foundation trop lourd.
    Mais j’ai peux être tort. je vasi regarder de plus prêt.

    Pour votre souci avec la v5 regarder ici peux être https://github.com/zurb/foundation/pull/3668#issuecomment-29912522 moi je met aussi foundation.min.js dans le body en fin de page. Sinon cela ne marche pas chez moi.

    • Phenix

      Je préfère prendre ce qui’ m’intérèsse et le mixer à ma sauce, car dans l’ensemble je trouve les css et javascript de bootstrap et foundation trop lourd.

      Avec le mécanisme de surcharge, c’est très facile de continuer a faire cela.
      Personnellement, je dev avec l’ensemble des fonctions de Foundation activé, puis je une version avec seulement ce que j’utilise.

      Pour votre souci avec la v5 regarder ici peux être https://github.com/zurb/foundation/pull/3668#issuecomment-29912522 moi je met aussi foundation.min.js dans le body en fin de page. Sinon cela ne marche pas chez moi.

      Merci, je vais voir ce que je peux faire avec ça

    Répondre à ce message

  • 2
    Shnoulle

    Salut,

    Cela me semble bine intéressant ! Aurit tu un site de démo ?

    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