SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 186 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Foundation > Utilisez le framework Foundation dans vos squelettes !

Utilisez le framework Foundation dans vos squelettes !

13 août 2013 – par Phenix – 85 commentaires

29 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 :

  1. #COLONNES{nombre, type}

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

Exemple :

  1. #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.

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

Télécharger

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 :

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

Voir en ligne : Foundation - Plugins SPIP

Dernière modification de cette page le 27 mars 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 28 mai à 17:39, par Manu En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Bonjour,
    je découvre depuis quelque temps zoundation et je trouve que c’est vraiment un grand bonheur d’utiliser cet outil.
    Merci infiniment !

    • Le 28 mai à 21:30, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Mais de rien !

      Si tu as des suggestions pour améliorer, n’hésite pas ! Ou mieux, contribue directement sur la zone :)

    • Le 23 juin à 06:19, par Manu En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Aïe, ouille, j’ai l’impression que zoundation et « court-circuit » ne s’entendent pas bien. Est-ce le fait du nommage des blocs z-core (?), malgré la présence d’un fichier rubrique.html et d’un fichier rubrique=xx.html dans le répertoire content du dossier squelette, le plugin court-circuit « ne voit pas » le fichier rubrique=xx.html quand on appelle l’url ?rubriquexx.
      Utilises-tu « court-circuit » avec zoundation ? As-tu constaté ce dysfonctionnement qu’il faut imputer à qui selon toi : z-core ou court-circuit ?

    • Le 23 juin à 08:03, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Hello,

      Je n’ai jamais utiliser court-circuit avec Zoundation. Mais en théorie cela devrait fonctionner.

      Cependant, je l’ai déjà utilisé avec le plugin « Courjus », qui est une autre implémentation des fonctions de court-circuit. Peut être que cela correspond à ton besoin :)

    • Le 23 juin à 08:40, par Manu En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Ben mince, erreur 404 !
      Est-ce qu’on pourrait échanger 5 minutes sur IRC pour voir ça ?

    • Le 23 juin à 08:44, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Hello,

      Il faut bien vider le cache de SPIP et avoir désinstallé court-circuit (les deux ensembles, cela va créer des erreurs PHP).
      Malheureusement, je ne peux pas me connecter en IRC avant ce soir.

    • Le 23 juin à 08:49, par Manu En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Oui, oui, bien sûr : j’avais bien vidé le cache et désinstallé court-circuit auparavant...

    • Le 23 juin à 08:51, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Tu dois avoir un autre soucis alors, est-ce que ton squelettes renvoie bien du contenu ? Parce que s’il ne renvoie rien, cela créer automatiquement une 404

    • Le 23 juin à 09:02, par Manu En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Ah, je me demande si ce n’est pas une histoire de collision entre courtjus (ou court-circuit) et compositions (j’ai attribué une composition à la rubrique sur laquelle je ferraille et j’ai l’impression que c’est là que ça bricole... J’explore ça (et je te laisse tranquille : en tout cas, merci de ta patience)

    • Le 23 juin à 17:16, par Manu En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Pas bien compris le truc, tout remis à 0, réinstallé les squelettes un par un, les variantes (rubrique=xx), les compositions puis les bodys personnalisés (body-nom-de-la-composition) en testant à chaque étape : court-circuit se comprte normalement à présent
      Désolé du dérangement

      Concernant foundation (que je trouve vraiment agréable à utiliser), j’ai dû installer dans une feuille de style personnalisée les déclarations permettant d’utiliser les block grid
      http://foundation.zurb.com/sites/docs/v/5.5.3/components/block_grid.html
      normal ? pas normal ? Tous les composants ne sont pas installés en fait, c’est cela ?

      Encore mille merci pour ce très chouette zoundation

      PS : Des fois SPIP, c’est comme un moteur de mobylette : tu le démontes parce qu’il ne marche pas, tu ne vois rien, tu remontes et ça repart (enfin, pas toujours...). Cela dit, il a dû y avoir des collisions quelque part, peut-être aussi des erreurs de nommage de fichiers ? bref, je ne saurai jamais mais c’est reparti.

    • Le 23 juin à 18:08, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Hello,

      Normalement, tout les composants sont installé par défaut.
      Attention cependant, si tu utilise Zoundation, c’est foundation 6 qui est fourni.
      Dans cette version les block-grid on disparu. Ils existent en tant que grille :

      http://foundation.zurb.com/sites/docs/grid.html#block-grids

      Bref, vérifie ta version :)

    Répondre à ce message

  • Le 10 avril à 14:09, par mano En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Bonjour,
    d’abord merci pour ce plugin qui facilite grandement l’intégration de foundation.

    le Hack pour la gestion du deep linking pour les tabs n’est plus nécessaire, il génère une erreur js d’ailleurs (s’il y a un appel ajax)

    var link_tab = window.location.hash.substr(1);
            if (link_tab) {
                    $('[data-tabs]').eq(0).foundation('selectTab', $('#'+link_tab));
            }

    la documentation de foundation n’a pas été mise à jour encore,
    pour activer le deeplinking sur un tab, il faut ajouter : data-deep-link=« true »

    <ul class="tabs" data-tabs data-deep-link="true" id="example-tabs">

    les anciennes options sont de retour aussi :
    deepLinkSmudge : true
    //scroll vers le tab appelé

    deepLinkSmudgeDelay : 300
    //delai avant le scroll au chargement de la page

    updateHistory : true
    //ajouter une entrée dans l’historique navigateur

    https://github.com/zurb/foundation-...

    Répondre à ce message

  • Le 8 février à 15:31, par AlainF En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Bonjour et bravo pour ce travail,
    pour remonter quelques infos :
    en insérant des vidéos youtube en iframe dans un article, le filtre |iframe_responsive
    de la page article

    [<section class="[(#EDIT{texte}) ]surlignable">
            (#TEXTE|image_reduire{720,0}|iframe_responsive)
    </section>]

    Pose problème à cette page !!!
    Comme si un div n’est pas fermé ?
    Config :
    -  SPIP 3.1.3 [23214]
    -  Zoundation 1.0.36 - dev
    -  Z-core 2.6.1
    -  Foundation 6.3.4

    Merci d’avance.
    Alain

    Répondre à ce message

  • Le 8 février à 15:35, par AlainF En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Pour précision,
    cela ne perturbe qu’à partir d’une seconde vidéo en iframe.
    Alain

    Répondre à ce message

  • Le 26 septembre 2016 à 15:47, par Pierre KUHN En réponse à : Utilisez le framework Foundation dans vos squelettes !

    bonjour,

    Est il prévu une astuce pour que le menu principale soit responssive avec une toogle ?

    Répondre à ce message

  • Le 6 décembre 2016 à 10:13, par AlainF En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Tout d’abord, Merci pour ce travail qui doit prendre beaucoup de temps.

    Pour ma part, je créé en premier une rubrique « Infos Générales » où je mets ce qui ne va pas ailleurs (Présentation du site, Mentions légales, etc.)

    J’ai vu dans la configuration de Zoundation, que l’on pouvait indiquer les rubriques du sommaire que l’on souhaitait utiliser, ben moi, c’est l’inverse, je souhaiterais toutes les rubriques, surtout celles à venir que je ne connais pas encore, sauf la « rub1 » (infos générales) bien sur !!!

    Pourquoi pas dans un ToDo à venir, ce serait un plus pour mon utilisation...

    Amitiés spipiennes, Alain.

    Répondre à ce message

  • Le 23 mai 2016 à 15:42, par komi En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Merci pour ce plugin !

    Je me demande si il serait possible de pouvoir utiliser le système de grille de Foundation dans les articles coté privé, en ajoutant des raccourcis du type :

    <col4></col4> <col8></col8>

    ou quelque chose dans le style.

    Quelqu’un a déjà fait ça ?

    • Le 28 septembre 2016 à 23:21, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Non, je n’ai même jamais envisagé d’utiliser des modèles pour faire cela directement dans des articles.

      L’intérêt me semble assez limité, les modèles ne sont pas fait pour cela (il n’y a pas de balise fermante).
      Si tu as ce genre de besoin, c’est qu’il faut revoir ta fonctionnalité, les articles SPIP n’ont pas pour vocation de gérer une structure HTML.

    Répondre à ce message

  • Le 26 août 2016 à 17:03, par trufo En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Salut,
    j’ai fait un site sur la base zoundation que tu as mise sur github et ça marche trés bien. Merci :)
    Là je suis en train de faire le lien vers ma page facebook avec le plugin facebook.
    Bon j’ai configuré le plugin avec l’id et la clé secrète de mon app et fait le lien vers mon compte. Tout ça en local sous easyPhp. Ensuite testé avec un petit texte en passant par publication > facebook. Le texte apparait bien sur ma page facebook.
    Mais j’ai 2 petits soucis :
    -  Quand je veux publier un article sur facebook avec le bouton sur la gauche de l’article je reçois le message d’erreur : « Graph returned an error : Service temporarily unavailable ».
    -  Lorsque j’installe le plugin connecteur (nécessaire pour facebook) sur mon site distant plus rien ne répond. Ni la page privée ni la page publique. Si je recharge la page privée il me met qu’il y a une erreur sur la ligne 67 de connecteur_fonctions.php. Une fois le plugin supprimé avec ftp tout rentre dans l’ordre.

    • Le 28 août 2016 à 22:21, par trufo En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Alors j’ai mis le site chez un autre ébergeur et les 2 erreurs mentionnées ont disparu.
      A mon avis ça doit être : pour la première que j’étais en local, pour la seconde c’est peut-être lié à la version de php (5.2.17 chez l’ancien hébergeur et 5.6.22 chez le nouveau). D’ailleurs la version que j’ai dans easyPhp est la 5.6.24. Je sais que c’est pas le bon endroit pour poster des commentaires sur ce plugin facebook mais comme il n’est pas sur ce site...

    • Le 28 septembre 2016 à 23:16, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Hello,

      Le plugin Facebook n’a rien a voir avec le plugin Foundation ou le squelette Zoundation :).

      C’est encore un plugin en dev, donc il n’y a pas vraiment de page pour lui.
      Pour signaler ce genre de problème, je te conseil d’envoyer un email à la liste SPIP-zone. Ce sera 1000 fois plus efficaces car il y a beaucoup de développeurs qui pourront prendre en charge le soucis.

    Répondre à ce message

  • Le 21 mars 2016 à 22:04, par graphie En réponse à : Utilisez le framework Foundation dans vos squelettes !

    Bonjour,

    Y aurait-il une possibilité d’activer le mode Flexbox (sur la version 6 ;-) ?

    http://foundation.zurb.com/sites/docs/flexbox.html

    Merci,
    françois

    Répondre à ce message

  • Le 28 février 2016 à 19:05, par Philippe Robin En réponse à : Utilisez le framework Foundation dans vos squelettes !

    bonjour

    documentation vraiment évasive.
    entre les différentes versions de foundation/version du plugin, avec ou sans Z, arborescence, etc

    pas de code de squelette simple pour exemple, un sommaire ou une page article.

    difficile de commencer du bon pied.

    merci néanmoins, il faut donc que je progresse...

    • Le 28 février 2016 à 21:08, par Philippe Robin En réponse à : Utilisez le framework Foundation dans vos squelettes !

      sans parler de #ORBIT

    • Le 28 février 2016 à 21:26, par Phenix En réponse à : Utilisez le framework Foundation dans vos squelettes !

      Bonjour Philippe,

      Pour commencer, je souhaiterai rappeler que mon travail est bénévole, et que la mise à jour de cette documentation, ainsi que la création/maintenance de ce plugin ce fait sur mon temps libre.
      Alors oui, je le confesse, cette documentation est réduite au minimum et pas toujours très bien mise à jour. Mais elle existe.

      Ensuite, la documention du framework Foundation est disponible en ligne et couvre la totalité des fonctionnalités du plugin.

      Je n’ai documenté que les ajouts spécifiques à SPIP.

      Il existe bien un squelette basé sur Foundation, mais son développement n’est pas encore arrivé à maturité, il n’est donc pas documenté.
      Il peux cependant déjà servir d’exemple d’utilisation.

    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

  • Massicot

    7 octobre 2015 – 70 commentaires

    Recadrez et redimensionnez vos images directement dans l’espace privé de SPIP ! Inspiré par le plugin photospip, ce plugin plus minimaliste permet de recadrer et redimensionner les images dans l’espace privé de SPIP. Une fois le plugin installé (...)

  • Plugin « masquer »

    7 juillet 2010 – 26 commentaires

    Ce plugin permet de masquer sur le site public un contenu auquel le mot-clé « masquer » a été attribué. Le contenu, rendu invisible sur le site public, est cependant toujours présent et accessible à vos visiteurs si vous leur donnez le bon lien. Il (...)

  • Formulaire de contact avancé

    23 mars 2009 – 1377 commentaires

    Un formulaire de contact configurable, avec de multiples options.

  • Einsteiniumist (Squelette)

    23 avril 2013 – 80 commentaires

    Un squelette principalement conçu pour les sites de type blog et portfolio. Présentation : Adaptation pour Zpip du thème Wordpress Einsteiniumist conçu par Padd Solutions. Voir une démo du thème et du squelette Einsteiniumist. Ce squelette (...)

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 46 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

Ça spipe par là