SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 75 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 – 116 commentaires

30 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 17 octobre 2018

Retour en haut de la page

Tout afficher

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

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

  • Menu animé déroulant

    16 août 2015 – 59 commentaires

    Barre de menu dynamique multi niveaux - adaptation aisée (?) des couleurs et dimensions - convient aussi aux petits écrans (mobiles).

  • Réservations multiples

    4 juillet – commentaires

    Permettre aux utilisateurs d’effectuer de réservations multiples (réserver pour plusieurs personnes à la fois ou réserver un événement plusieurs fois) Dépendances Saisies Réservation d’événements Introduction Il y a deux manières de multiplier les (...)

  • PHANTOM (HTML5UP)

    18 juillet – 32 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • SPIPer Ipsum, l’évangile au quotidien

    28 décembre 2009 – 89 commentaires

    Ce plugin permet d’afficher les différentes lectures de l’évangile du jour et le saint du jour selon le calendrier fixé par l’Eglise catholique. Ce service est proposé par le site de L’Evangile au Quotidien dans plusieurs langues. Description Le (...)

  • ciparam : plugin « Configurateur de squelettes »

    29 novembre 2010 – 15 commentaires

    Ce plugin offre un mécanisme de sélection de forme de rubrique ou d’article, un mécanisme de variantes de chartes graphiques, la possibilité de choisir l’ordre de tri des articles dans les rubriques, un mécanisme de paramétrage de la page d’accueil, (...)