# Utilitaires

# Optimisation SVG v1.3+

Overdog permet d'optimiser et de nettoyer les SVG automatiquement et de créer un sprite avec ceux-ci.

# Fonctionnement

Placez vos fichiers SVG dans le dossier src/svg/sprite-images. Ces fichiers seront ensuite combinés en symbol dans un fichier JavaScript qui les injectera dans votre DOM après le chargement de la page.

# Utilisation du sprite dans vos templates

Pour utiliser un SVG du sprite ainsi créé, utilisez la façon suivante. Remplacez #logo-overdog de l'exemple par le nom original du SVG désiré. Le nom de chaque fichier SVG est utilisé pour créer son ID dans le sprite.

<svg class="votre-classe"><use xlink:href="#logo-overdog"></use></svg>

Le use xlink:href va aller chercher le code du symbol #logo-overdog dans le sprite et l'afficher à l'intérieur de la balise SVG. Le xlink est déprécié au profit de seulement href, mais Safari 11(2017) en a besoin. Il est encore suggéré de le conserver.

TIP

Si votre page ne contient pas de use xlink:href, le fichier JS des SVG ne sera pas chargé.

# Anciennes versions de Overdog (avant v1.3)

Si vous utilisez une version de Overdog avant v.1.3, placez vos fichiers SVG dans le dossier src/svg/sprite-images. Faites à la racine de votre projet dans le terminal : yarn svg. Vous devrez ajouter l'alias @svgPath avant votre ID de SVG dans votre HTML. Regardez les exemples déjà faits dans votre projet.

# Modifier la couleur via votre feuille de style SCSS / CSS

Comme le SVG Sprite est dans un shadow DOM, vous devez supprimer les balises fill= de votre fichier SVG si vous souhaitez modifier sa couleur via votre SCSS par la suite (aux groupes ET aux paths). Vous pouvez aussi ajouter une variable CSS dans le code du SVG. Exemple fill=var(--primary).

# Utilisation scalable (sans width ou height)

Pour redimentionner un SVG responsivement, c'est assez complexe. Si votre div a un height et un width bien définis, c'est super (ex: icônes, illustrations, etc.). Mais si vous souhaitez qu'un SVG utilise tout l'espace disponible en largeur, sans avoir de dimension (ex: divider). Disons fit the available width, c'est plus tricky.

TIP

Un truc : Prenez le viewbox du symbol et mettez le sur votre <svg> tag dans votre template. Mettez ensuite le width ou le height à auto. Les navigateurs vont ajuster automatiquement en respectant le ratio du viewbox.

Article de Amelia Bellamy-Royds sur Css-tricks.

# Linting

# Commandes

Pour linter et autofixer le Scss et Javascript de votre projet, allez à la racine du projet avec votre terminal.

# SCSS

La config utilisée est basée sur le SCSS guidelines

yarn lint:scss

# JS

La config utilisée est celle de standardjs.com

yarn lint:js

# Pre-commit hook

Fonctionnalité à venir

# Lazyload

# Fichiers nécessaires

Ajoutez les fichiers lazyload.js et _lazyload.scss de navig.dev dans vos dossiers JS et SCSS de projet et importez-les (probablement dans app.js et index.scss).

# 1. Utilisation avec un format défini par vous, selon vos dimensions (pour un effet similaire à background-image)

Un div avec la classe lazy-fit doit entourer votre tag img pour l'arrière-plan.
Ajoutez une classe pour votre style custom (dimensions, etc.).
Ce div doit avoir un width et un height ou un padding-bottom pour un ratio responsive.

{% set photo = entry.yourAssetsField.one() %}
{% if photo %}
  <!-- div wrapper avec lazy-fit -->
  <div class="lazy-fit votre-classe-de-style">
    <!--
    auto=format permet à Imgix de retourner un WEBP ou un JPG
    Vous pouvez aussi utiliser auto=compress,format pour une compression agressive
    Les sizes sont en exemples, ajustez selon vos changements de colonnes
    -->
    <img
      loading="lazy"
      decoding="async"
      data-srcset="{{ photo.url }}&w=1500&auto=format 1500w,
                   {{ photo.url }}&w=1280&auto=format 1280w,
                   {{ photo.url }}&w=600&auto=format 600w"
      sizes="(min-width: 1200px) 40vw, (min-width: 768px) 60vw, 100vw"
      <!-- src is only for scrset non-support browser -->
      data-src="{{ photo.url }}&w=900"
      alt="{{ photo.title }}"
     />
  </div>
{% endif %}

# 2. Utilisation avec un format d'image inconnu (exemple: provenant du CMS)

Un div avec la classe lazy-img doit entourer votre tag img.
Ajoutez les attributes height et width à la balise <img>. En savoir plus via Malte Uble de Google
Le div qui wrap doit avoir un width défini.

{% set photo = entry.yourAssetsField.one() %}
{% if photo %}
  <!-- div wrapper avec lazy-img -->
  <div class="lazy-img votre-classe-de-style">
  <!--
  auto=format permet à Imgix de retourner un WEBP ou un JPG
  Vous pouvez aussi utiliser auto=compress,format pour une compression agressive
  Les sizes sont en exemples, ajustez selon vos changement de colonnes
  -->
    <img
    height="{{ photo.height }}"
    width="{{ photo.width }}"
    loading="lazy"
    decoding="async"
    data-srcset="{{ photo.url }}&w=1500&auto=format 1500w,
                 {{ photo.url }}&w=1280&auto=format 1280w,
                 {{ photo.url }}&w=600&auto=format 600w"
    sizes="(min-width: 1200px) 40vw, (min-width: 768px) 60vw, 100vw"
    <!-- src is only for scrset non-support browser -->
    data-src="{{ photo.url }}&w=900"
    alt="{{ photo.title }}"
   />
</div>
{% endif %}

# Comportement

WARNING

Avec les exemples suivants, on veut éviter un layout shift de la page lorsque les images sont chargées. Un arrière-plan gris léger remplace donc l'image jusqu'au défilement et chargement. Celle-ci sera affichée avec un effet d'opacité.

# Webfonts

Priorisez la fonctionnalité native des navigateurs concernant le chargement des polices.

Utilisez dans vos @font-face :

font-display: swap;

TIP

Si vous utilisez un kit web de typographies web, n'oubliez pas d'aller cocher dans votre Adobe kit ou Google webfont kit cocher ou activer le font-display: swap.

# PurgeCSS v1.0.1+

PurgeCSS efface automatiquement toutes les classes inutilisées dans vos templates (dossier templates) et les supprime lors du build.

Notez que le reset.scss et root.scss sont whitelistés. Vous pouvez ajoutez des classes whitelistées dans le fichier webpack.prod.js.

WARNING

Dans votre fichier index.scss, vous retrouverez les mentions /*! purgecss start ignore */ qui entoure des fichiers whitelistés en entier. À manipuler avec précaution!

# Critical CSS

Généré automatiquement lors du build pour la page d'accueil. Info à venir.

← Templating Plugins →