Travaux visuels sur la logique de quadrillage

[darcosion]

Actuellement, le quadrillage est fixé, chaque carré fait 62 pixels de taille.

Cela génère un défaut bête : les écrans et les pages proposés ne sont pas en nombre de pixel des multiples de 62 pixels.

Si l'on souhaite avoir des boites de travaille de tailles multiples à 62 pixels, nous allons avoir des soucis comme cela :

Il y aurait plusieurs solutions à cela :

• Trouver un multiple cohérent pour l'ensemble des tailles d'écran possibles
• utiliser des propriétés CSS pour régler automatiquement la taille de pixels des blocs en multiples de taille d'écran
• autres solutions ?

A priori, l'idée intéressante serait de prendre une taille d'écran X Y et de dire qu'on divise cette taille par le nombre de blocs que l'on souhaite (64 par exemple ?), ce qui donnerait (X Y) / 64 = nb de pixels d'un bloc ?

Donc en utilisant des propriétés CSS comme :

--nb_bloc : 64;
--size_bloc : calc(calc(100vh * 100vw) / 64);

Pour définir des variables que l'on pourrais utiliser, cela me semblerais possible ?

[darcosion]

Je pressent néanmoins des risques techniques à trop employer ce genre de méthode : les menu pourraient avoir des dimensions qui perdent en sens de cette façon et il faudrait adapter la totalité du CSS à ce modèle de règle.

[darcosion]

Un premier exemple pratique a été effectué dans ecdb3bd6e225c5f09eeb59dd30b7620171c4397c https://github.com/darcosion/Echosounder/blob/ecdb3bd6e225c5f09eeb59dd30b7620171c4397c/static/main.css#L19-L20 https://github.com/darcosion/Echosounder/blob/ecdb3bd6e225c5f09eeb59dd30b7620171c4397c/static/main.css#L46-L55

Ici, on peut voir qu'une taille de 4% du viewport vertical a été définit dans la variable --height-header et que cette taille a été réutilisé dans le calcule de taille du header ainsi que du texte dans le header, ce qui prouve que l'emploi dynamique de taille d'écran peut fonctionner avec des variables CSS !

edit : fix de l'exemple : a529e8ddbd79e5da0d40e1cfd839515b5490c3c3