Responsive & RTL

GolemUI adapts to different screen sizes using two complementary strategies: media queries for global token scaling, and container queries for component-level layout adaptation.

Breakpoints

GolemUI defines four breakpoint reference tokens:

Token	Value
--gui-bp-sm	640px
--gui-bp-md	768px
--gui-bp-lg	1024px
--gui-bp-xl	1280px

Caution

CSS custom properties cannot be used inside @media queries — this is a CSS limitation. These tokens exist as documented references. The actual media queries in the stylesheet use literal pixel values.

Responsive token scaling

At smaller viewport sizes, spacing and typography tokens automatically scale down to keep the UI compact and readable.

At 768px and below

Token	Default	Scaled to
--gui-space-6	1.5rem (24px)	1.25rem (20px)
--gui-space-8	2rem (32px)	1.5rem (24px)
--gui-space-10	2.5rem (40px)	2rem (32px)

At 640px and below

Token	Default	Scaled to
--gui-space-4	1rem (16px)	0.75rem (12px)
--gui-space-6	1.5rem (24px)	1rem (16px)
--gui-space-8	2rem (32px)	1.25rem (20px)
--gui-space-10	2.5rem (40px)	1.5rem (24px)
--gui-font-2xl	1.5rem (24px)	1.25rem (20px)
--gui-font-3xl	2rem (32px)	1.5rem (24px)

Tip

Because components use these tokens for their spacing and sizing, they automatically become more compact on small screens — no extra work needed on your part.

Container queries

GolemUI forms respond to their container width, not just the viewport. This means a form placed in a narrow sidebar adapts correctly even on a wide screen.

What adapts at 480px container width

When the form container is 480px or narrower, several components automatically adjust their layout:

Component	Behavior
Horizontal fields	Switch from row to column layout
Flex rows	Stack vertically
Calendars	Expand to full container width
Tab buttons	Reduce padding and font size

RTL support

GolemUI supports right-to-left layouts for languages like Arabic, Hebrew, and Persian.

Enabling RTL

When you set in the localization property a RTL language like Persian or Hebrew, then the form will display automatically as RTL.

React

i18next.init({
  fallbackLng: 'fa',
  fa: {
    translation: {
      rtl: { username: 'نام کاربری', password: 'رمز عبور', },
    },
  },
});

const localization = { /* i18next implementation */ };

export function FormPage() {
  return (
    <div>
      <React.FormComponent
        formDef={formDef}
        data={formData}
        fieldLoader={widgetLoaders}
        localization={localization}
      />
    </div>
  );
}

Angular

@Component({
  imports: [CommonModule, Angular.FormComponent],
  selector: 'app-dynamic-form',
  template: `<gui-form
    [formDef]="formDef"
    [data]="formData"
    [customWidgetLoaders]="widgetLoaders"
    [localization]="localization"
  ></gui-form>`,
})
export class AppFormPage {
  protected localization = { /* i18next implementation */ };

  constructor() {
    i18next.init({
      fallbackLng: 'fa',
      fa: {
        translation: {
          rtl: { username: 'نام کاربری', password: 'رمز عبور', },
        },
      },
    });
  }
}

Lit

@customElement('lit-form')
export class FormElement extends LitElement {
  protected localization = { /* i18next implementation */ };

  constructor() {
    i18next.init({
      fallbackLng: 'fa',
      fa: {
        translation: {
          rtl: { username: 'نام کاربری', password: 'رمز عبور', },
        },
      },
    });
  }

  render() {
    return html`
      <div>
        <gui-form
          .formDef=${this.formDef}
          .data=${this.formData}
          .customWidgetLoaders=${this.widgetLoaders}
          .localization=${this.localization}
        ></gui-form>
      </div>
    `;
  }
}

Yes, it’s that easy. Nothing else on your side has to be handled.

Check the i18n section for more examples and full implementation details.

What adapts automatically

All components mirror automatically in RTL mode — no additional CSS needed on your side.

Area	What adapts
Text and inputs	Padding and alignment flip to match reading direction
Icons and arrows	Select arrows, date-picker icons, and toggle sliders reposition
Buttons	Repeater action buttons align to the correct side
Calendar	Month navigation arrows mirror direction