Étiquette : mixin

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

Testé fonctionnel Magento 2.4. La markup HTML de la fiche produit a cependant été surchargé par rapport au standard. On retrouve la première rangée d’informations sur deux colonnes (gauche: visuel principal et carousel Fotorama; droite: libellé produit, prix, formulaire d’ajout au panier).

Surcharger la largeur et la hauteur max du visuel principal dans le fichier etc/view.xml de votre thème:

Le code LESS (qui fait appel à un mixin spécifique permettant d’écrire des boucles FOR qui exploitent des données consignées dans un ARRAY. Il ne faudra donc pas oublier de l’inclure dans votre projet! (Documentation).
Lisez les commentaires dans mon code pour plus de documentation:

Version non factorisée (ça fait la même chose en moins bien conceptualisé et en beaucoup plus chiant à maintenir):

[Magento 2] Etendre un mixin existant

Etendre une extension de widget existante dans Magento 2 n’est pas possible. Il faut obligatoirement surcharger l’extension existante en déclarant l’extension initiale à false dans le fichier requirejs-config.js du module (pouvant être différent) qui contient la nouvelle extension:

Notes:

  • la bonne pratique consiste à placer les extensions de widgets dans des modules (app/code/...) plutôt que dans un thème.

[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 :

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

Doc Foundation 6 – Flex Grid – @mixin flex-grid-size

Une rangée basée sur 8 colonnes

[SASS] Fonctions et mixins pour manipuler les couleurs

Eclaircir une couleur avec la fonction Mix de SASS

Assombrir une couleur avec la fonction Mix de SASS

[CSS] Des bordures en dégradé

Source : CSS Tricks – Gradient borders.

border-image and linear-gradient

Pseudo Element Edges

Pseudo Element Block Knockout

Multiple (Sized) Gradient Backgrounds

[Foundation 6] Un mixin SASS utilisant une fonction étendue de map-get pour obtenir un effet sur une icône

Le but ici est d’associer à un titre une combinaison de deux icônes issues d’une police d’icônes: une grande et une petite calée en bas à droite de la grande.

HTML:

SASS:

Importer la librairie Sassy Maps de Hugo Giraudel

Nous allons utiliser la fonction map-deep-get de cette librairie dans notre mixin.

Créer le mixin SASS:

Ce mixin SASS récupère dans le tableau de variables ci-dessous la valeur font-size définie pour un élément HTML Hx en fonction d’un breakpoint:

Il calcule ensuite la taille de la grande et de la petite icône.

Utiliser ce mixin SASS:

[Foundation 6] Réinitialiser les styles par défaut pour l’élément HTML de formulaire Input

Source: Cleanest way to customize input[type=’text’] styles, codewise.

Depuis quelques semaines (et deux projets en cours de production), je décortique avec grand intérêt le framework front-end responsive Foundation 6 for sites créé et maintenu par Zurb. J’utilise Bootstrap 3 depuis sa première release stable (et Bootstrap 2 avant ça). Mais Bootstrap 4 étant encore en version Alpha j’ai décidé, pour voir, de me tourner vers une solution que je considère comme étant son principal challenger (la première version stable de Foundation 6 ayant vu le jour il y a plus d’un an).

Les possibilités offertes par Foundation 6 en terme d’habillage des champs de formulaire

Dans Foundation 6, les styles de l’ensemble des champs de saisie textuelle des formulaires (text, password, date, datetime, datetime-local, month, week, email, number, search, tel, time, url, color mais aussi l’élément HTML textarea) sont générés à partir d’une fonction text-inputs.

Cette fonction est déclarée dans le fichier /scss/util/_selector.scss du framework et se présente comme ceci:

C’est ensuite à l’aide d’un mixin foundation-form-text déclaré dans le fichier /scss/forms/_text.scss du framework que toute la batterie de styles par défaut pour l’élément input, l’ensemble de ses itérations
et l’élément textarea sont générés. Ce mixin se présente comme ceci (extrait) :

Le code CSS qui en résulte ressemble à ceci (extrait) :

Annuler les styles par défaut sur une sélection d’éléments

A ce stade, nous pourrions avoir besoin d’annuler les styles par défaut sur une sélection d’éléments pour repartir from-scratch (le bon vieux concept de reset CSS) et habiller un ou plusieurs champs de notre charte qui se démarquent visuellement des standards (un champ « Recherche » dans le bandeau de votre site ou un champ d’inscription à la « Newsletter » en pied de page par exemple; cette contrainte se présente quasi systématiquement).

Pour annuler les styles standards pour l’élément de formulaire input, nul besoin d’écrire un reset. Il faut surcharger le mixin foundation-form-text en passant en paramètre $modifier une pseudo-classe :not() à laquelle on attribuerait une classe générique, mais au libellé suffisamment parlant (par exemple, .is-unstyled (extrait):

La sortie CSS sera alors la suivante (extrait):

Désormais, un <input type="text" class="is-unstyled" /> ne sera plus affecté par les styles standard de Foundation 6. Pas besoin d’alourdir son code CSS avec quantité de styles reset pour annuler les déclarations par défaut. On peut se concentrer sur notre habillage custom.

Petit conseil: n’utilisez cette classe .is-unstyled que pour signifier, dans votre code HTML, quels éléments input ne doivent pas hériter des styles standards de Foundation 6. Pour les styler différemment, ajoutez une classe supplémentaire. Exemple:

Pour finir, sachez que vous pouvez faire appel à la fonction text-inputs à (quasiment) n’importe quel endroit dans votre code SCSS pour déclarer des styles spécifiques pour un élément donné ou toute une batterie d’éléments à la fois.

Quid des possibilités offertes par Bootstrap 4 en terme d’habillage des champs de formulaire?

De prime abord, on peut trouver ça déroutant que les styles soient appliqués à des attributs d’éléments plutôt que sur les éléments eux-mêmes via des classes, surtout si on est habitué à la logique Bootstrap 3 ou 4 et à ses classes .form-group et .form-control à appliquer sur des <div> englobantes ou sur les éléments eux-mêmes. Les styles Foundation 6 habillent d’office l’ensemble des champs de formulaires et c’est embêtant quand on veut s’affranchir de la patte graphique « Foundation » pour afficher certains formulaires.

Mais dans la pratique et avec les contraintes du terrain, la décision s’avère extrêmement pertinente (surcharge de toute la batterie de champs de formulaires d’un coup !).

Il faut le reconnaître, les formulaires sont c$%!§£s à habiller. J’ai voulu faire un test très simple: j’ai récupéré le code HTML d’un formulaire sur un site réalisé avec Drupal 7 (donc n’intégrant ni Bootstrap, ni Foundation pour que la structure HTML reste totalement neutre) et le module Webform. J’ai ensuite appliqué tour à tour la CSS sortie-de-la-boite de Bootstrap 4 et de Foundation 6 sans modifier de code ni HTML, ni CSS.

N’hésitez pas à agrandir/réduire la fenêtre en largeur pour tester l’aspect Responsive.

Avec Foundation 6, la mise en page est propre. Les champs sont habillés de manière minimaliste et le tout est parfaitement Responsive. Si votre client ne souhaite pas investir trop d’argent dans les formulaires, vous n’avez quasiment aucun travail à faire (minus peut-être les boutons à habiller) sur ce point pour obtenir un affichage convenable.

Avec Bootstrap 4, rien n’est habillé. Rien n’est Responsive. Et pour cause, les classes .form-group et autre .form-control doivent être rajoutées dans le code HTML pour obtenir un résultat (on peut aussi passer par SASS pour faire pointer les styles des classes Bootstrap sur les classes déjà en place). Au travail les développeurs front-end!!

Conclusion

A partir du moment où on décide d’aborder Foundation 6, on ne peut échapper à la comparaison avec Bootstrap 4. Chaque fois que j’en parle autour de moi, mes interlocuteurs veulent savoir si c’est mieux.

Comme je le disais en introduction, j’ai utilisé Bootstrap pendant des années. J’en connais ses points forts et ses points faibles et force est de constater que ces derniers n’ont pas été gommés avec l’arrivée de la version 4. Et l’habillage des formulaires ne reste qu’un tout petit exemple. Essayez de passer d’un menu accordéon en vue Mobile à un menu horizontal déroulant en vue Desktop… Le markup HTML est toujours (passage de la version 3 à la 4) différent d’un composant à l’autre, toujours pas de prise en charge des mediaqueries via JS, toujours pas de méthode .destroy() selon les cas.

En revanche, on sent dans la logique de fonctionnement et d’articulation du code de Foundation 6 que ses concepteurs sont des développeurs front-end chevronnés. Le framework est conçu pour être facile à utiliser et à étendre. Ses composants sont étudiés pour répondre aux contraintes quotidiennes du développeur. Avec les composants de navigation Responsive inclus, passer d’un menu accordéon en vue Mobile à un menu horizontal déroulant en vue Desktop se fait avec des classes et des data-attributes à ajouter au bon endroit dans le code HTML. Même pas besoin d’écrire de JS! Et on voit avec l’exemple donné dans ce billet que le code natif est pensé pour s’adapter immédiatement à l’environnement dans lequel il est parachuté.

Je ne peux que vous motiver à tenter de produire un site avec Foundation 6. Vous m’en direz des nouvelles 😉



Hello,
this is not an issue, but more of a concern about how to make the best out of Foundation 6 out-of-the-box SCSS components for custom website design.
So, I hope some skilled Foundation users will read this and share their opinions. 🙂

I’ve found some of the mixins to either:

  • include too much CSS properties for custom needs (core and skin properties are often merged within a same mixin),
  • prevent developer to custom-skin HTML elements (with skin values being forced rather than being included as mixin parameters).

As an example, here’s the dropdown-container mixin that includes both core and skin CSS properties :

Let’s assume I have 10 elements on my website that would use the dropdown component. 9 of them would have the same design. I can set the $dropdown- variables in the _dropdown.scss file to my regular needs.

But what if I want to take profit of the dropdown component for 1 specific element, but don’t want to show a border or need custom padding compared to the regular dropdown ?
Solutions I came up with include:

1. Make use of the regular mixin and override skin properties

(I guess I could use a Gulp plugin to remove duplicated properties within the same declaration… => Gulp clean-css with removeDuplicateRules option. Or CSS nano with discardDuplicates option).

Edit: even with a good Gulp CSS cleaning plugin, I can see a couple of issues doing that way :

  • You’ll still need to reset each and every property included in the mixin and that you don’t want to use :

2. (heavier and not so good idea IMO) Split standard mixin in 2.

3. Creating an SCSS placeholder that includes mixin core properties.

Third solution is the one I prefer so far. I might dig for a Gulp plugin that removes duplicate properties and first solution might become my favourite in the end.
What would you do?

Thanks.

[SASS] Mixin button-reset pour annuler les styles appliqués aux boutons

Source: Codepen.io – Reset button style.

[CSS] Utiliser la propriété « transform: rotate(); » pour faire pivoter les icônes d’une police d’icônes

IMPORTANT: l’icône ne pivotera que si la propriété CSS display: inline-block; lui est appliquée!

IMPORTANT #2: appliquer la transformation sur la classe de l’élément ciblé et pas sur la pseudo-classe :before utilisée par les polices d’icônes.