Contents

Row CSS Classes

Attach your own CSS class names to the row's flex wrapper so your site's stylesheet can style the band.

Where to find it
Labelled CSS Classes in the "Entire Row" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

Same idea as column CSS Classes, but for the whole row. RuleCMS puts the class names on the row's flex wrapper and forms no opinion about what they mean — your site's stylesheet does the rest.

A class-only row (no other layout settings, one column) will emit that wrapper solely to carry the class. Clearing the classes removes the wrapper again when nothing else needs it.

When you would use it

  • You want a section band to pick up an existing host class such as "hero" or "section".
  • Your design system already styles row-level layout and you want RuleCMS to plug into it.

How to change it

  1. Click any column in the row, open "Entire Row", then "CSS Classes".
  2. Type a space-separated list of class names.
  3. Use "Same classes for all resolutions" when every device should share the list, or set phone, tablet, and desktop separately.
  4. Check the published page (or a real host preview) — the composer canvas will not show the host styles.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Nothing changes in the composer. The composer does not load your site's stylesheet.
  • On a row, the class lands on the row's flex wrapper. A class-only row (no other layout settings, one column) will emit that wrapper solely to carry the class.
  • RuleCMS does not check the class exists. A typo fails silently, exactly as it would in hand-written HTML.

Related settings

Where to go next