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.

updated on 2 October 2019

Discussion

Aucune discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom