Styling

When a node is selected, the editing panel appears below. The first section lets you change the tag. Below that is the Style panel, which is divided into Desktop, Tablet, and Mobile.

Adding Styles

Click Add to see the full list of CSS properties. You can also type to search. For example, type height, press Enter, then type 100px and press Enter again. That adds a height of 100 pixels to the node.

You can add more properties the same way. For example, add background-color and pick a value from the list -- like the text color variable. Variables are editable in the Style Guide panel.

Responsive Design

Meno uses a desktop-first responsive system. Styles cascade from Desktop down to Tablet down to Mobile. Tablet inherits from Desktop, and Mobile inherits from Tablet.

Switch to the Tablet or Mobile view and change a property to override it at that breakpoint. Properties you do not override are inherited from the breakpoint above.

For some properties -- fontSize, padding, margin, and gap -- Meno applies responsive scales automatically. You only need to set the Desktop value, and smaller breakpoints adjust proportionally.

Next Steps

• Interactive Styles -- Add hover, focus, and dynamic state styles.

• Building Components -- Create reusable styled components.

• JavaScript -- Toggle classes for JS-driven style changes.