SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 67 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 – 104 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 23 octobre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

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

  • Sauvegarder le répertoire IMG/ avec wget

    20 février 2007 – 10 commentaires

    Voici un système client serveur en deux lignes pour sauvegarder le répertoire des documents.

  • Rôles de documents

    21 février – commentaires

    Ce plugin permet d’attribuer un rôle aux documents liés aux contenus, et cerise sur le gâteau, rend possible la gestion des logos par le biais des documents-joints. Principe Les documents liés aux contenus n’ont pas forcément tous la même (...)

  • COLT : Extension de Firefox utile pour SPIP

    21 septembre 2008 – commentaires

    Une petite extension de Firefox qui permet de copier des liens sous format SPIP

  • Moulinette

    17 juillet 2015 – 46 commentaires

    Un squelette qui monte et qui descend ! Moulinette est un squelette basé sur le thème Grayscale (documentation) pour Bootstrap 3. Le type de site attendu est un site en une seule page : une rubrique avec quelques articles, des titres courts, des (...)

  • Plugin Duplicator

    3 janvier 2010 – 88 commentaires

    Duplication de rubrique et de ses contenus, et duplication d’articles pour SPIP Fonctionnement Ce plugin permet de dupliquer une rubrique et son contenu depuis l’espace privé en ajoutant un bouton dans la navigation de gauche dans l’espace privé (...)