TagLESS

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

[Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

Documentation officielle: Magento UI Library – Forms mixins.

Bonnes pratiques

Si vous avez simplement l’intention de changer les valeurs des variables existantes (regardez la doc, il y en a beaucoup, vous pouvez probablement vous en tirer sans aller plus loin que ça…) faites le dans le fichier _theme.less de votre thème.

Fields customization variables – The .lib-form-field() mixin variables

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

A savoir: lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

Libellés à côté des champs, une colonne

Libellés à côté des champs, deux colonnes

A savoir: (je me répète…) lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

[Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories

Utiliser les variables mises à disposition par Magento 2

Si votre thème hérite de blank: dans le fichier @product-grid-items-per-row-layout-2-left-screen-s (que vous devrez surcharger dans votre thème), modifiez les valeurs des variables suivantes:

Utiliser la fonction calc de CSS

Pour 4 produits par rangée:

Pour 1 produit par rangée en Mobile, 2 produits par rangée en Tablet, 4 produits par rangée en Desktop:

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

Vous allez vous retrouver à devoir surcharger des choses de ce style:

Dans width: calc((100% - 6%) / 4);, la valeur de 6% correspond à la somme des valeurs des marges margin-left apposées pour une rangée donnée et la valeur 4 au nombre de produits attendus pour une rangée.

Dans mon exemple, j’ai par exemple 2% de marge entre mes produits. 4 produits par rangées = 3x la marge de séparation de 2% = 6%.

[Magento 2] Exploiter la fonctionnalité CSS critical path avec un fichier LESS (via Grunt)

Versions de Magento 2.3.3+: Petit topo sur le CSS critical path dans la doc front-end officielle.

La fonctionnalité est limitée, nativement, à l’utilisation d’un fichier au format CSS (pas de LESS).

Pour contourner cette limitation, créez un fichier critical.less dans app/design/frontend/Vendor/theme/web/css/critical.less et déclarez ce dernier dans votre config Grunt (dev/tools/grunt/configs/local-themes.js):

Puis lancez les commandes:

[Magento 2] Importer les points de rupture CSS LESS pour une exploitation avec javascript jQuery

Source: Importing CSS Breakpoints Into JavaScript (adapté pour Magento 2).

!important: ce tuto demande à créer/modifier un certain nombre de fichiers. Le respect de l’organisation de ces derniers dans l’arborescence de votre thème est capital pour le bon fonctionnement de la fonctionnalité présentée. Vous pourrez bien-sûr modifier les emplacements des fichiers, mais pensez dans ce cas à mettre à jour tous les chemins en conséquence.

L’arborescence utilisée dans le code source fourni est mise à plat plus bas.

Intérêt pour le développeur Magento 2 d’importer les breakpoints LESS pour une exploitation avec javascript?

Magento 2 permet, par le biais de l’outil matchMedia.js, de déclencher du code javascript/jQuery en fonction d’un point de rupture. Extrait de la documentation officielle à ce sujet:

On remarque que la valeur du point de rupture est renseignée de manière statique (768px): media: '(min-width: 768px)'. Ce procédé a ses limites. Le jour où la valeur de ce breakpoint est modifiée dans la feuille de style, il faudra mettre à jour à la main toutes les déclarations faites avec matchMedia.

Le but est donc de rendre dynamique la valeur de media:.

Partie LESS:

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/ et y placer, à la racine, l’intégralité des fichiers disponibles sur ce repository Git.

A ce stade, il est surtout important que les fichiers for.less et for-each.less soient accessibles respectivement depuis les chemins suivants:

  • app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for.less
  • app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for-each.less
  • Note: le repo Git pouvant disparaître du jour au lendemain, un backup au format ZIP est disponible ici 😉.
  • Note #2: si vous regardez le code source du projet less-curious, vous remarquerez peut-être que ce dernier est déprécié et que l’auteur fournit un lien vers une version plus actuelle, full JS à intégrer avec un pré-processeur comme Grunt. Problème: j’ai eu beau suivre les bonnes pratiques d’intégration d’un plug-in pour grunt-contrib-less dans le système mis en place dans Magento 2, je n’ai rien réussi à compiler… UPDATE (pas testé) 05/11/2019: la solution se situe peut-être dans la mise en place d’une configuration custom de Grunt.

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/.

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/_js-mediaqueries.less et placez-y le code ci-dessous:

Dans le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/_theme.less, ajouter la ligne suivante JUSTE EN-DESSOUS des potentielles surcharges que vous avez faites des variables pré-déclarées dans le(s) thème(s) parent(s) dont votre thème va hériter:

Partie JS:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/js/js-mediaqueries.js:

Créer ou adapter le fichier app/design/frontend/<Vendor_name>/<theme_name>/requirejs-config.js:

Partie XML:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml:

Note: si ce fichier existe déjà dans votre thème, ajouter simplement la ligne <script src="js/js-mediaqueries.js" /> entre les balises <head>.

Commandes à exécuter en bash:

  • Un cache:clean
  • $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*

Un process Grunt doit tourner ou une compilation des assets front-end via une commande Magento doit être faite.

Arborescence complète, selon les fichiers de ce tuto:

  • app/design/frontend/[Vendor_name]/[theme_name]/
    • Magento_Theme/
      • layout/
        • default_head_blocks.xml
    • web/
      • css/
        • source/
          • devtools/
            • _js-mediaqueries.less
          • vendor/
            • less-curious/
              • src/
                • for.less
                • for-each.less
          • _theme.less
      • js/
        • js-mediaqueries.js
    • requirejs-config.js

[Magento 2] Ajouter et exploiter une librairie CSS tierce

Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place la librairie Animate CSS pour animer le bloc product-reviews-summary short au chargement de la page page-products catalog-category-view avec l’animation SlideInUp.

Ajouter les sources d’Animate CSS 3 dans: /<Vendor>/<theme>/web/css/vendor/animate/. Pour éviter de surcharger les sources CSS en production, nous allons importer uniquement l’animation qui nous intéresse (SlideInUp) et pas la librairie complète. Pour rendre l’ensemble disponible pour plus tard, vous pouvez placer ici l’ensemble des sources (fichiers animate.css, animate.min.css et dossier complet /source.

Ajouter au fichier /<Vendor>/<theme>/web/css/source/_theme.less (ou un autre fichier de votre thème qui centralise les imports de third-party libraries):

Ajouter au fichier /<Vendor>/<theme>/Magento_Catalog/web/css/source/_extend.less:

Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*. Il faut, bien sûr, qu’un processus de compilation des assets front-end (server side ou client side) soit en-train de tourner.

[Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS

Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place le composant Modal de Bootstrap 3.

LESS/CSS

Ajouter les sources CSS de Bootstrap 3 dans: /<Vendor>/<theme>/web/css/vendor/bootstrap/. Il faut embarquer:

  • le fichier /less/variables.less
  • le fichier /less/mixins.less
  • le fichier /less/modals.less
  • et TOUT LE DOSSIER /less/mixins/

…et pas le fichier /dist/css/bootstrap.css.

Ne pas oublier d’importer les fichiers LESS nécessaires dans une feuille de style source de votre thème (je l’ai fait dans /web/css/source/_theme.less, même si à priori ce fichier ne serait là que pour surcharger des valeurs de variables dèjà précédemment définiers dans un thème parent de Magento 2):

JS

Ajouter les sources JS de Bootstrap 3 dans: /<Vendor>/<theme>/web/js/vendor/bootstrap/. Attention: sachant que nous allons nous concentrer uniquement sur le composant Modal, il faut utiliser le fichier /js/modal.js (et pas le fichier /dist/js/bootstrap.js).

Créer le fichier: /<Vendor>/<theme>/requirejs-config.js:

Dans n’importe quel fichier *.phtml, placez le code HTML de votre modale Bootstrap. Si vos balises comportent les attributs qui vont bien vous n’aurez pas besoin de déclarer votre modale via JS. Dans le cas contraire, dans le fichier *.phtml qui contient le markup HTML de votre modale:

Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ php bin/magento cache:clean; rm -rf pub/static/*; rm -rf var/view_preprocessed/*.

[LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs

Attention: le plugin for.less utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.

Source: Loop over an array of name value pairs in LESS et mixin sous Git.

CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).

Mixin LESS (ne pas oublier d’inclure le mixin for.less) :

Rendu CSS :

[SASS][LESS] Remonter le DOM en CSS en utilisant l’esperluette

[CSS] Ne pas hériter de l’opacité d’un parent avec les Color Operation Functions de LESS ou SASS

…et notamment la fonction fade.

Source SASS: Mixins for semi-transparent colors.

Source LESS (notre exemple ci-dessous) : la doc de LESS à propos des Color Operation Functions, I do not want to inherit the child opacity from the parent in CSS et Modify alpha opacity of LESS variable.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑