Contents

CSS Classes

Attach your own CSS class names to the column so your site's stylesheet can style it.

Where to find it
Labelled CSS Classes in the "Selected Column" 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

Your page already has a design system — Tailwind, Bootstrap, a company theme, or plain CSS. CSS Classes lets you put those class names on a RuleCMS column so the host page styles the content the same way it styles everything else.

RuleCMS attaches the classes and nothing more. It does not know what they mean, does not preview them in the composer, and does not check that they exist. They only do something once the widget is on your published page, under your stylesheet.

The class lands on the outermost element the column emits. Which element that is depends on the component and whether the column has spacing set — inspect the published page, not the editor canvas.

When you would use it

  • You want a column to use an existing host class such as "card" or "hero" instead of restating those styles in RuleCMS.
  • Your design system already expresses spacing or colour decisions you do not want to duplicate.
  • Phones need a different class set from desktops (for frameworks that are not utility-first).

How to change it

  1. Select the column, open "Selected Column", then "CSS Classes".
  2. Type a space-separated list of class names, exactly as you would in HTML.
  3. Leave "Same classes for all resolutions" checked when every device should share the list, or uncheck it to set phone, tablet, and desktop separately.
  4. Publish or preview on your real site to see the effect — the composer canvas will not change.
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, so classes only do something once the widget is on your page.
  • On a column, the class lands on the outermost element. Which element that is depends on the component and on whether the column has spacing set — inspect the published page, not the editor.
  • Setting a class on a plain-text column with no styling adds a <div> that would not otherwise be there, because the class needs something to sit on.
  • 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