Layout and styling · Docs

Styling in Malla is plain CSS with a visual editor on top. Every control writes a real CSS property, per breakpoint and per state, so anything CSS can do, your site can do.

Layout types

Every frame picks one layout type in the Layout section of the inspector.

StackFlexbox. Children flow in a row or column with gap, alignment and distribution. Dragging reorders them.

GridCSS grid. Set columns and gaps; children fill the cells in order.

FreeChildren are positioned absolutely where you drop them, for overlapping or art-directed layouts.

Style sections

The inspector shows only the sections that apply to the selection.

LayoutLayout type, direction, alignment, distribution, gap, columns, padding, margin.

SizeWidth and height (fixed, fill, fit, auto or relative), min and max, overflow.

PositionStatic, relative, absolute, fixed or sticky, with insets and z-index.

TypographyFont, weight, size, line height, letter spacing, alignment, colour.

FillBackground colours, gradients and images, with token chips.

BorderWidth, style, colour and radius per side and corner.

EffectsOpacity, shadows, inset shadows, layer and background blur, transforms, cursor.

VisibilityShow, hide or bind visibility to an expression.

Numeric fields accept units (px, %, rem, vh…) and keywords like auto. Drag a field’s label to scrub the value.

Breakpoints

Design for desktop first, then override for smaller screens. Pick a breakpoint in the toolbar: every edit now writes to that breakpoint only. Controls show a dot when the value is overridden here, and a reset button removes the override.

Breakpoint	Applies when	Artboard width
Desktop (base)	always, unless overridden	1440 px
Tablet	viewport ≤ 991 px	768 px
Phone	viewport ≤ 767 px	390 px

States

The state bar above the style sections switches between Default, Hover, Focus and Active. Values set in a state apply only while the element is in it, and work per breakpoint too.

Where a style goes

The style target in the class bar decides what your edit changes: the element’s own local styles, or one of its classes. Edit a class and every element using it changes. Local styles always win over classes. See Classes and tokens.

Data-driven styles

Any style value can be bound to an expression, such as a colour that depends on stock or a width from a progress value. Bound styles compile to a CSS variable set per element at run time, so the rest of the CSS stays static and cacheable. See Bindings.

Under the hood

Styles are stored as camelCase CSS properties grouped by breakpoint and state:

json

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