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.
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}
Discussions par date d’activité
28 discussions
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 ?
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.
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
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.
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.
Merci Phenix,
Il fallait créer un fichier perso.css dans le repertoire css effectivement. Ça marche nickel.
Répondre à ce message
Salut
Alors concernant foundation 5 et spip 3.1 (en dev), le mécanisme de surcharge n’est plus :
squelettes/foundation/foundation-5
maissquelettes/lib/foundation-5
.Voilà, donc peut-être ajouter une correction pour éviter de perdre 1h à chercher ;)
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 :
J’avoue cependant qu’elle devrait ce trouver au dessus et être plus significative. Je vais modifier.
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.
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
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 ;
Hello,
J’ai en effet quelques ressources :
Mon site perso, je viens de le mettre à jour, les sources sont sur GitHub :
https://github.com/phenix-factory/p.henix.be
Un autre site que j’ai fait pour une ASBL, il est moins à jour et utilise la syntaxe dépréciée :
https://github.com/phenix-factory/Veille-et-protege
Ce n’est pas forcément ce qui ce fait de plus complexe avec Foundation cependant, il y a moyen d’aller beaucoup plus loin.
N’hésite pas si tu as des questions :)
Ho, j’oubliais !
Je suis en train de bosser sur un squelettes Zcore pour Foundation.
https://github.com/phenix-factory/Zoundation
C’est pas encore complet mais il y a déjà quelques squelettes de la dist qui sont surcharger pour fonctionne avec Foundation.
Comme le squelettes des documents par exemple :
https://github.com/phenix-factory/Zoundation/blob/master/inclure/documents.html
Ou l’utilisation de la pagination (par défaut) dans le style de Foundation :
https://github.com/phenix-factory/Zoundation/blob/master/modeles/pagination.html
Mrerci pour le retour, sur la zone pour quand ? histoire voir le code sur un site ;)
Aucune idée, il n’est pas du tout prêt à être diffusé, j’y travail quand j’ai le temps.
Il sera sur la zone quand il sera « correcte ». Pour le moment c’est juste une bonne base.
Rien n’empêche de l’installer sur un SPIP pour tester :)
Je l’ai charger, cela va me donner de bonne piste pour avancé.
Salut,
Dans le fichier body du as 2 } ligne 4 ;)
Hello,
Oups, c’est corrigé :
https://github.com/phenix-factory/Zoundation/commit/d1a0894b3662671abf2edbf2e816c0c063247565
Répondre à ce message
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
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
hello,
est ce que ce plugin intègre la « toute » derniere de foundation, càd la 5
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 :)
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 ?
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.
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 !
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.
J’utilise les balises #INSERT_HEAD et #INSERT_HEAD_CSS.
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
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 pipelineinsert_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. :J’ai réussi à faire fonctionner orbit, sans avoir a tout mettre avant le
Répondre à ce message
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.
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.
Merci, je vais voir ce que je peux faire avec ça
Répondre à ce message
Salut,
Cela me semble bine intéressant ! Aurit tu un site de démo ?
Hello,
Bien sur, même si ce ne sont surement pas les meilleur exemple d’utilisation.
La page de démo de Foundation mérite aussi un coup d’oeil.
M’as l’air vraiment sympa.
Merci :)
PS : la page de démo de fondation ne montre pas le plugin, mais fondation ;)
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 :
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.
Suivre les commentaires : |