Project

General

Profile

Support #37223

scss vars pour gestion des medias queries, breakpoints

Added by Thomas Jund about 2 months ago. Updated 12 days ago.

Status:
Nouveau
Priority:
Normal
Assignee:
Target version:
-
Start date:
25 Oct 2019
Due date:
% Done:

0%

Patch proposed:
No
Planning:
No

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 {}

History

#1 Updated by Thomas Jund about 2 months ago

  • Description updated (diff)

#2 Updated by Serghei Mihai about 1 month ago

Je rajouterais le suffixe -width à tes variables pour plus de clarté: $min-mobile-width, $max-mobile-width.

#3 Updated by Thomas Jund about 1 month ago

  • Assignee set to Thomas Jund

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";

#4 Updated by Frédéric Péters about 1 month ago

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).

#5 Updated by Thomas Jund about 1 month ago

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.

#6 Updated by Thomas Jund about 1 month ago

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.

#7 Updated by Thomas Jund 27 days ago

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.

#8 Updated by Frédéric Péters 27 days ago

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.

#9 Updated by Thomas Jund 12 days ago

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

Also available in: Atom PDF