Project

General

Profile

Development #37223

scss vars pour gestion des medias queries, breakpoints

Added by Thomas Jund 9 months ago. Updated 5 months ago.

Status:
Solution déployée
Priority:
Normal
Assignee:
Target version:
-
Start date:
25 Oct 2019
Due date:
% Done:

0%

Patch proposed:
Yes
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 {}

0001-scss-add-custom-medias-sass-vars-to-manage-medias-qu.patch View (9.04 KB) Thomas Jund, 20 Dec 2019 04:09 PM

0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch View (176 KB) Thomas Jund, 29 Jan 2020 05:23 PM

0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch View (5.69 KB) Thomas Jund, 29 Jan 2020 05:23 PM

0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch View (2.46 KB) Thomas Jund, 29 Jan 2020 05:23 PM

0001-scss-all-themes-use-custom-mobile-and-desktop-medias.patch View (176 KB) Thomas Jund, 03 Feb 2020 05:36 PM

Associated revisions

Revision ec5e6df4 (diff)
Added by Thomas Jund 5 months ago

scss: add sass vars to manage mobile & desktop medias queries (#37223)

Revision be233cda (diff)
Added by Thomas Jund 5 months ago

scss: themes: manage mobile & desktop medias queries with sass vars (#37223)

History

#1 Updated by Thomas Jund 9 months ago

  • Description updated (diff)

#2 Updated by Serghei Mihai 8 months ago

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

#3 Updated by Thomas Jund 8 months 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 8 months 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 8 months 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 8 months 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 8 months 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 8 months 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 7 months 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

#10 Updated by Thomas Jund 7 months ago

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.

¹ https://drafts.csswg.org/mediaqueries-5/#custom-mq

#11 Updated by Thomas Jund 5 months ago

Up

#12 Updated by Frédéric Péters 5 months ago

Patch pour le core, si ok je modifie aussi les thèmes.

ok.

#13 Updated by Thomas Jund 5 months ago

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.

#14 Updated by Thomas Jund 5 months ago

Correction pour theme "portal-agent" qui n'hérite pas des styles includes/

#16 Updated by Frédéric Péters 5 months ago

  • Status changed from Solution proposée to 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 ?

#17 Updated by Thomas Jund 5 months ago

Yes, les autres ne sont que des rechercher / remplacer. Je vais raccourcir le/les commits messages.

#18 Updated by Thomas Jund 5 months ago

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)

#22 Updated by Thomas Jund 5 months ago

  • Status changed from Solution validée to Résolu (à déployer)
  • Tracker changed from Bug to Development

#23 Updated by Frédéric Péters 5 months ago

  • Status changed from Résolu (à déployer) to Solution déployée

Also available in: Atom PDF