Layout y estilos · Docs

En Malla, los estilos son CSS normal con un editor visual encima. Cada control escribe una propiedad CSS real, por punto de quiebre y por estado, así que todo lo que puede hacer CSS lo puede hacer tu sitio.

Tipos de layout

Cada frame elige un tipo de layout en la sección Layout del inspector.

StackFlexbox. Los hijos fluyen en una fila o columna con gap, alineación y distribución. Arrastrar los reordena.

GridCSS grid. Define columnas y gaps; los hijos llenan las celdas en orden.

FreeLos hijos se posicionan de forma absoluta donde los sueltas, para layouts superpuestos o con dirección de arte.

Secciones de estilo

El inspector muestra solo las secciones que aplican a la selección.

LayoutTipo de layout, dirección, alineación, distribución, gap, columnas, padding, margin.

SizeAncho y alto (fijo, fill, fit, auto o relativo), mínimo y máximo, overflow.

PositionStatic, relative, absolute, fixed o sticky, con insets y z-index.

TypographyFuente, peso, tamaño, interlineado, espaciado entre letras, alineación, color.

FillColores de fondo, degradados e imágenes, con chips de tokens.

BorderAncho, estilo, color y radio por lado y por esquina.

EffectsOpacidad, sombras, sombras internas, desenfoque de capa y de fondo, transformaciones, cursor.

VisibilityMuestra, oculta o enlaza la visibilidad a una expresión.

Los campos numéricos aceptan unidades (px, %, rem, vh…) y palabras clave como auto. Arrastra la etiqueta de un campo para ajustar el valor.

Puntos de quiebre

Diseña primero para escritorio y luego sobrescribe para pantallas más pequeñas. Elige un punto de quiebre en la barra de herramientas: desde ese momento, cada edición se escribe solo en ese punto de quiebre. Los controles muestran un punto cuando el valor está sobrescrito aquí, y un botón de restablecer quita la sobrescritura.

Punto de quiebre	Aplica cuando	Ancho de la mesa de trabajo
Escritorio (base)	siempre, salvo que se sobrescriba	1440 px
Tablet	viewport ≤ 991 px	768 px
Teléfono	viewport ≤ 767 px	390 px

Estados

La barra de estados encima de las secciones de estilo cambia entre Default, Hover, Focus y Active. Los valores definidos en un estado aplican solo mientras el elemento está en ese estado, y también funcionan por punto de quiebre.

Dónde va un estilo

El destino del estilo en la barra de clases decide qué cambia tu edición: los estilos locales del propio elemento o una de sus clases. Edita una clase y cambian todos los elementos que la usan. Los estilos locales siempre ganan sobre las clases. Consulta Clases y tokens.

Estilos basados en datos

Cualquier valor de estilo se puede enlazar a una expresión, como un color que depende del stock o un ancho que sale de un valor de progreso. Los estilos enlazados se compilan como una variable CSS definida por elemento en tiempo de ejecución, así el resto del CSS sigue siendo estático y cacheable. Consulta Enlaces de datos.

Por dentro

Los estilos se guardan como propiedades CSS en camelCase agrupadas por punto de quiebre y estado:

json

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