Development #37223
scss vars pour gestion des medias queries, breakpoints
0%
Description
Aujourd'hui on a 2 breakpoints gérés par des variables $mobile-limit et $very-small-limit:
C'est assez imprécis pour les intégrateurs de thèmes.
$mobile-limit est le (min-width) ou le (max-width) ?
Actuellement, $mobile-limit est la valeur max-width
Pour spécifier des styles pour le desktop il faut donc écrire
@media (min-width: $mobile-limite + 1px) {}
Et pourtant je croise parfois
@media (min-width: $mobile-limite) {}
Je propose de clarifier les choses en créant les variables
$max-very-small = "(max-width: $very-small-limit)" $min_mobile = "(min-width: $very-small-limit + 1)" $max-mobile = "(max-width: $mobile-limite)" $min-desktop = "(min-width: $mobile-limite + 1)"
Et pouvoir ainsi utiliser simplement
@media $min-mobile and $max-mobile {}
Fichiers
Révisions associées
scss: themes: manage mobile & desktop medias queries with sass vars (#37223)
Historique
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 4 ans
- Description mis à jour (diff)
Mis à jour par Serghei Mihai il y a plus de 4 ans
Je rajouterais le suffixe -width à tes variables pour plus de clarté: $min-mobile-width, $max-mobile-width.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 4 ans
- Assigné à mis à Thomas Jund (congés, retour le 29/04)
en effet, ma proposition manque de clarté.
Je me demande même s'il n'est pas mieux de définir le préfix `bq` pour les beakpoints et `mq` pour toutes les variable relatives aux medias queries.
Et ne plus utiliser le therme mobile qui ne veut plus dire grand chose.
je propose par exemple
$bq-max--XS: 480px;
$bq-max--S: 800px;
$bq-max--M: 1200px;
$mq-max--XS: "max-width #{$bq-max-XS}"
$mq-min--S: "min-width #{$bq-max-XS}+1"
$mq-max--S: "max-width #{$bq-max-S}"
$mq-min--M: "min-width #{$bq-max-S}+1"
…
@media ($mq-min--S) and ($mq-max--M) {}
et du coup avoir la possibilité de garder la même syntaxe pour définir les breakpoints et medias queries de certains composants
// STEPS: Breakpoints between small & horizontal layout
$bq-max--wcs-steps-small-layout: $bq-max--XS !default;
$mq-max--wcs-steps-small-layout: "max-width: #{$bq--wcs-steps-small-layout}";
$mq-min--wcs-steps-horizontal-layout: "min-width: #{$bq--wcs-steps-small-layout}+1";
Mis à jour par Frédéric Péters il y a plus de 4 ans
De mon côté je trouve bien plus explicite et parlant un $mobile qu'un $bq ou $mq; surtout que $mobile- comme préfixe donne(ra) quelque chose de bien clair pour les autres options, genre $mobile-steps-mode: le rendu des étapes en mode mobile. Et si on veut une zone intermédiaire on ajouter des $tablet-* et il me semble que ce sera clair que $mobile < $tablet < $desktop.
La ~seule fonction de $very-small-limit est de basculer tous les champs grille en mode 100% de largeur; pour se distancier des autres aspects du rendu on peut imaginer en changer le nom, je n'ai pas de proposition qui me plaise (genre $grid-single-stack-limit: 400px).
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 4 ans
mq c'est pour dire que c'est une variable à utiliser en media-queries
bq: que c'est juste une valeur de breakpoint. (ah be ouaih , faudrait bk en fait :} ).
J'aimais bien l'idée d'intégrer les "max-width" & "min-width" au sein des variables sass. Utiliser
@media ($mq-max-mobile) {}
plutot que
@media (max-width: $mobile-max)
Mais pour cela il faut déclarer d'un côté les breakpoints et en définir les media-queries. d'où la proposition de différencier les 2 par un prefix
C'est plus XS, S et M qui remplace mobile, tablet, laptop
Je voulais nommer les variables en terme de taille (résolutions): "XSmall", "Small", "Medium" plutôt qu'en terme de terminaux dont les tailles évolues. On a des tablets de la taille de laptops, des mobiles de la taille de tablettes, des laptops avec des résolutions fullHD. Bref ça bouge tout le temps.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 4 ans
La ~seule fonction de $very-small-limit est de basculer tous les champs grille en mode 100%
Pour le moment, je l'utilise aussi maintenant par défaut pour basculer le layout des steps.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 4 ans
Frederic Peters:
perso je ne suis pas pour l'instauration d'un troisième mode, je note dans le ticket que la ~seule fonction de $very-small-limit est de basculer tous les champs grille en mode 100%, que ce n'est pas pour moi à prendre comme un breakpoint.
Là dessus on a un désaccord.
Moi je serais justement pour définir plus de breakpoints.
Pour reprendre ton vocabulaire je serais pour à minima
$mobile-limit: 600px; $tablet-limit: 1000px; $laptop-limit: 1300px; $mq-max-mobile $mq-min-tablet $mq-max-tablet $mq-min-laptop $mq-max-laptop $mq-min-desktop
Et je suis pour que la grille utilise ces breakpoints par défaut.
Mis à jour par Frédéric Péters il y a plus de 4 ans
C'est ajouter 50% de travail, aux développeurs quand il s'agit de trouver un rendu adapté à trois modes au lieu de deux, à tout le monde quand il s'agit de tester trois modes au lieu de deux; et c'est quelque chose qui du coup ne m'attire pas des masses.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 4 ans
C'est ajouter 50% de travail, aux développeurs quand il s'agit de trouver un rendu adapté à trois modes au lieu de deux, à tout le monde quand il s'agit de tester trois modes au lieu de deux; et c'est quelque chose qui du coup ne m'attire pas des masses.
Je comprends. Notre objectif est bien de réussir à rester sur un design system simple.
Mais je vois mal comment tous les composants pourraient fonctionner autant en 320px qu'en 800px (que je passerai bien à 960 pour pouvoir supporter les 3 colonnes du layout 2 col + sidebar d'ailleurs) .
Idem pour les aspects typographiques (tailles de fonts déjà).
Loin de moi l'idée de compliquer le travail de quiconque, mais bien de rendre notre plateforme fonctionnelle, et précisément sur smartphone.
Si le core prend en charge la majorités des problématiques responsives pour chaque module, je pense que cela faciliterait au contraire la vie des intégrateurs de thèmes qui seraient outillés, en cas de besoin, pour adapter .
Pour limiter nos layouts à une seul point de rupture, il faudrait non plus une approche responsive, mais adaptative en limitant la largeur du site-wrapper autour de 500px. Ce qui serait une approche bien différente de l'existant.
Je reste persuadé qu'à minima il faudrait 2 points de rupture:
- un pour passer de mobile vers tablet à 560px (voir #37745)
- un pour passer de tablet à desktop à 960px
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 4 ans
- Fichier 0001-scss-add-custom-medias-sass-vars-to-manage-medias-qu.patch 0001-scss-add-custom-medias-sass-vars-to-manage-medias-qu.patch ajouté
- Tracker changé de Support à Bug
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Le débat n'avançant pas sur 1 ou 2 breakpoint(s), j'avance une première proposition en reprenant les retours de chacun avec:
- 1 seul breakpoint comme actuellement.
- une syntaxe `$max-mobile-viewport` et `$min-desktop-viewport` pour les custom medias.
- une utilisation du type `@media ($min-desktop-viewport) {}` plutôt que `@media #{$min-desktop-viewport} {}`. Je la trouve plus simple et pour être conforme au future standard CSS des custom media queries¹ qui propose pour le moment la syntaxe `@media (--custom-media)`.
Patch pour le core, si ok je modifie aussi les thèmes.
Mis à jour par Frédéric Péters il y a environ 4 ans
Patch pour le core, si ok je modifie aussi les thèmes.
ok.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
- Fichier 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch ajouté
- Fichier 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch ajouté
- Fichier 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch ajouté
Patchs des thèmes publik, imio et atreal,
la variable $min-desktop-viewport a patché pas mal de définitions incorrectes comme:- min-width: $mobile-limit
- min-width: $mobile-limit - 1
Ces modifications révèlent que majoritairement le core et les themes sont codée en desktop first, j'espère que cette modif permettra de voir un peu plus de mobile first :)
Courage pour la relecture, long et chiant.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
- Fichier 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch 0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch ajouté
Correction pour theme "portal-agent" qui n'hérite pas des styles includes/
Mis à jour par Frédéric Péters il y a environ 4 ans
- Statut changé de Solution proposée à Solution validée
On essaie de garder un sujet en-dessous de 80 caractères; à part ça je disais ok pour le premier patch, les autres ne sont que des rechercher/remplacer, non ?
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
Yes, les autres ne sont que des rechercher / remplacer. Je vais raccourcir le/les commits messages.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
commit be233cdaba9a263185d22decaad41750866961d0 (HEAD -> master, origin/master, origin/HEAD)
Author: Thomas JUND <tjund@entrouvert.com>
Date: Wed Jan 29 16:55:53 2020 +0100
scss: themes: manage mobile & desktop medias queries with sass vars (#37223)
commit ec5e6df44b82b289119565dd4e0c3a6e92cf0222
Author: Thomas JUND <tjund@entrouvert.com>
Date: Fri Dec 20 15:56:33 2019 +0100
scss: add sass vars to manage mobile & desktop medias queries (#37223)
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
- Tracker changé de Bug à Development
- Statut changé de Solution validée à Résolu (à déployer)
Mis à jour par Frédéric Péters il y a environ 4 ans
- Statut changé de Résolu (à déployer) à Solution déployée
scss: add sass vars to manage mobile & desktop medias queries (#37223)