Utiliser la Gem Foundation et le plugin Foundation

Depuis la version 2.3.9 du plugin Foundation il est possible d’utiliser la Gem Foundation en conjugaison avec le plugin.

Mais pourquoi ?

Par défaut, le plugin charge l’intégralité du code CSS de Foundation. Ce n’est pas toujours utile car il est rare d’utiliser tous les composants présents.

La Gem Foundation va charger la version SASS, qui permet de sélectionner les composants selon vos envies, sans avoir à charger du code CSS inutile.
C’est l’équivalent de la surcharge, mais en utilisant SASS.

Installation

Pour ce qui est de l’installation et de l’utilisation de la Gem Foundation, reportez-vous à la documentation officielle.

Une fois la Gem installée, on initialise Foundation dans le dossier squelettes de SPIP, je pars du principe que ce dernier est vide/n’existe pas encore :

phenix@thanatos /S/test> foundation new squelettes

Cette commande va installer Foundation et les dépendances dans le dossier squelettes.

Utiliser un dossier css

Par défaut, Compass va compiler les fichiers CSS dans le dossier « stylesheets ». Ce n’est pas dans ce dossier que SPIP va chercher les fichiers CSS par défaut.
Par défaut, SPIP utilise un dossier « css ». Comme on a pas envie d’éparpiller les fichiers CSS dans plusieurs dossiers, on va indiquer à Compass d’utiliser le bon dossier.
Pour ce faire, on modifie le fichier config.rb. Personnellement, j’utilise ceci :

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

J’en profite aussi pour activer l’option « relative_assets » qui permet d’utiliser des url relatives.

Activer le mode « SASS » dans le plugin.

Il reste à définir la constante _FOUNDATION_SASS pour activer le chargement des scripts adaptés :

// Activer foundation app
define('_FOUNDATION_SASS', true);

A partir de la, le plugin cherchera les composant de Foundation dans le dossier « bower_components » et chargera le fichier app.css.

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom