Project

General

Profile

Development #36800

".site-wrapper" & $page-padding, une class et une variable nos marges

Added by Thomas Jund 13 days ago. Updated 13 days ago.

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

0%

Patch proposed:
No
Planning:
No

Description

Proposition d'amélioration du core scss avec une nouvelle class : ".site-wrapper" et une nouvelle variable $page-poadding

Problèmes actuels.
  • En mobile, une petite marge existe entre les conteneurs et le bord de l'écran. C'est bien mais aucune variable pour gérer sa taille, aucun moyen de la passer à 0 par exemple.
  • En "tablette", entre $width et $mobile-limit en fait, ces marges disparaissent, pouf.
  • La valeur de $width qui permet de fixer taille max aux conteneurs est dupliqué dans chaque conteneur où elle est nécessaire.
  • Graphiquement, Dans une logique d'harmonie, il est préférable d'instaurer un ratio entre ces marges et les gouttières entre les colonnes (c'est plus ou moins le cas aujourd'hui, où gouttières = marges x2 (0.7em x2), sauf pour la sidebar qui a une gouttière fixe de 20px) et un ratio avec le rythme vertical ou l'espace qui sépare 2 cellules, qui est + est égal à la marge.
Solution proposée:
  • créer une class ".site-wrapper" générique qui permet lors de la création d'un nouveau bloc conteneur d'être certain d'y appliquer les bonnes marges et $width et éviter de dupliquer ces valeurs partout.
  • Ajouter une variable $page-padding (parce que techniquement c'est un padding) qui permet de paramétrer la taille de marges et donc la taille des gouttières du/des layouts
  • Baser la taille des gouttières sur cette nouvelle variable

Si dans la suite je reviens sur le système de grille, il sera préférable d'utiliser "$layout-gutter-size" comme variable de référence pour $page-padding. Et donc seul $layout-gutter-size sera prioritairement paramétrable dans la création de thème.
Si vous trouvez mieux que $page-padding comme nom de variable je suis preneur.

problem-layoutTablet-noPageMarging.png View (721 KB) Thomas Jund, 09 Oct 2019 11:40 AM

layoutTablet-withPageMarging.png View (525 KB) Thomas Jund, 09 Oct 2019 11:46 AM

layoutTablet-BigPageMarging.png View (482 KB) Thomas Jund, 09 Oct 2019 11:52 AM

layoutTablet-PageMarging0.png View (541 KB) Thomas Jund, 09 Oct 2019 11:55 AM

37997
37998
37999
38000

History

#1 Updated by Thomas Jund 13 days ago

  • Private changed from No to Yes

Pour ce genre type de proposition / d'évolution, qui touche à theme.html, cells.scss, nav.scss et layout.scss, je vous pousse un patch ou une branche ?

#2 Updated by Thomas Jund 13 days ago

  • Private changed from Yes to No

#3 Updated by Frédéric Péters 13 days ago

Pour ce genre type de proposition / d'évolution, qui touche à theme.html, cells.scss, nav.scss et layout.scss, je vous pousse un patch ou une branche ?

Pousse plutôt une branche.

#4 Updated by Thomas Jund 13 days ago

Voir wip/36800_scss-page-wrapper

#5 Updated by Frédéric Péters 13 days ago

Détails de forme avant de regarder attentivement, deux mini points : attention à ne pas laisser des espaces en fin de ligne (dans _cells.scss, il y a en derrière // In 2 cols template, add gutter et d'autres lignes), supprimer les lignes qui veulent être supprimées, plutôt que les mettre en commentaire. Et un troisième, il y a de nouvelles lignes de code ajoutées en commentaire, pas clair leur fonction.

Also available in: Atom PDF