Mise en page et styles · Docs

Dans Malla, le style, c’est du CSS simple avec un éditeur visuel par-dessus. Chaque contrôle écrit une vraie propriété CSS, par point de rupture et par état : tout ce que le CSS sait faire, votre site sait le faire.

Types de mise en page

Chaque cadre choisit un type de mise en page dans la section Layout de l’inspecteur.

StackFlexbox. Les enfants s’enchaînent en ligne ou en colonne, avec espacement, alignement et répartition. Les faire glisser les réordonne.

GridGrille CSS. Définissez les colonnes et les espacements ; les enfants remplissent les cellules dans l’ordre.

FreeLes enfants sont positionnés en absolu là où vous les déposez, pour des mises en page superposées ou très travaillées.

Sections de style

L’inspecteur n’affiche que les sections qui s’appliquent à la sélection.

LayoutType de mise en page, direction, alignement, répartition, espacement, colonnes, padding, marge.

SizeLargeur et hauteur (fixe, remplir, ajuster, auto ou relative), min et max, débordement.

PositionStatic, relative, absolute, fixed ou sticky, avec décalages et z-index.

TypographyPolice, graisse, taille, hauteur de ligne, interlettrage, alignement, couleur.

FillCouleurs, dégradés et images d’arrière-plan, avec des pastilles de jetons.

BorderÉpaisseur, style, couleur et arrondi par côté et par coin.

EffectsOpacité, ombres, ombres intérieures, flou du calque et de l’arrière-plan, transformations, curseur.

VisibilityAfficher, masquer ou lier la visibilité à une expression.

Les champs numériques acceptent des unités (px, %, rem, vh…) et des mots-clés comme auto. Faites glisser le libellé d’un champ pour faire varier la valeur.

Points de rupture

Concevez d’abord pour le desktop, puis remplacez les valeurs pour les petits écrans. Choisissez un point de rupture dans la barre d’outils : chaque modification ne s’applique alors qu’à ce point de rupture. Les contrôles affichent un point quand la valeur y est remplacée, et un bouton de réinitialisation supprime le remplacement.

Point de rupture	S’applique quand	Largeur du plan de travail
Desktop (base)	toujours, sauf remplacement	1440 px
Tablette	viewport ≤ 991 px	768 px
Mobile	viewport ≤ 767 px	390 px

États

La state bar au-dessus des sections de style bascule entre Default, Hover, Focus et Active. Les valeurs définies dans un état ne s’appliquent que tant que l’élément s’y trouve, et fonctionnent aussi par point de rupture.

Où va un style

La cible de style dans la barre de classes détermine ce que votre modification change : les styles locaux de l’élément, ou l’une de ses classes. Modifiez une classe et tous les éléments qui l’utilisent changent. Les styles locaux l’emportent toujours sur les classes. Voir Classes et jetons.

Styles pilotés par les données

N’importe quelle valeur de style peut être liée à une expression, comme une couleur qui dépend du stock ou une largeur issue d’une valeur de progression. Les styles liés sont compilés en une variable CSS définie par élément à l’exécution : le reste du CSS reste statique et peut être mis en cache. Voir Liaisons.

Sous le capot

Les styles sont stockés sous forme de propriétés CSS en camelCase, regroupées par point de rupture et par état :

json

"styles": {
  "base":       { "display": "flex", "gap": "12px", "paddingBlock": "120px" },
  "base:hover": { "opacity": "0.9" },
  "tablet":     { "paddingBlock": "80px" },
  "mobile":     { "flexDirection": "column", "paddingBlock": "64px" }
}