SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 248 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 – 70 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 2 avril 2016

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

  • Réservation d’événements

    16 mars 2015 – 241 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Moulinette

    17 juillet 2015 – 34 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 (...)

  • Formulaire de contact avancé

    23 mars 2009 – 1372 commentaires

    Un formulaire de contact configurable, avec de multiples options.

  • Plugin « Agrandir la largeur de page »

    3 août 2015 – 21 commentaires

    Ce plugin permet d’agrandir la largeur de la page dans l’espace privé de SPIP. Vous pourrez personnaliser cette largeur si besoin. Préambule Dans l’espace privé de SPIP, lorsque nous sommes connectés, nous pouvons choisir dans nos préférences (...)

  • Levenshtein

    9 mai 2016 – commentaires

    Proposition de mots lors de la recherche. La principale vocation du plugin Levenshtein est de proposer des corrections de mots lors de la recherche. Dépendance Pour fonctionner le plugin a besoin d’un lexique dans lequel faire les (...)