search

Styling your form

Forms are built on top of the Bootstrap 4arrow-up-right CSS framework. This means that any components / classes from it can be used in e.g. the "Custom CSS classes" property of any form page, section or element.

In addition to this, every form has a 'CSS' tab, in which you can specify any custom CSS including classes that you can use in the aforementioned "Custom CSS classes".

However, if you are using Workspaces that use multiple forms, it is a better idea to define your custom CSS in one place: the Workspace CSS. This can be configured in your Organization profile > Workspace. This will save repetition and maintenance.

hashtag
Styling for Dark mode

Rulecube has two themes: Light and Dark. Light can be considered the default theme. The moon/sun icon at the top of the page can be used to toggle between these. In the Workspace settings you can define whether to always force one theme or the other. However, if you want to support both themes, you will need to define the necessary CSS.

When the Dark theme is active, the <body> element will receive the darkmode class. This means you can write your own custom Dark mode style as follows:

/* Light mode styling */
.my-class {
  background-color: white;
  color: black;
}

body.darkmode {
   /* Dark mode styling */
   .my-class {
      background-color: black;
      color: white;
   }
}

hashtag
Extra classes

Besides the existing Bootstrap 4 classes, Rulecube has some extra classes built on top of it.

hashtag
Width and Max-width

Rulecube defines several width and max width classes:

.w-50px through .w-2600px - sets the width of the target to the specified amount of pixels (increments of 50: 50px, 100px, 150px, etc.).

.w-max-50px through .w-max-2600px - sets the max-width property of the target. (increments of 50: 50px, 100px, 150px, etc.).

.w-min-50px through .w-min-2600px - sets the min-width property of the target. (increments of 50: 50px, 100px, 150px, etc.).

hashtag
Responsiveness classes

Rulecube defines some granular responsiveness classes:

.d-50px through .d-2600px or .d-min-50px through .d-min-2600px- will only make the element visible if the screen width is more than the specified width in pixels when used with d-none.

Example: giving an element the classes "d-1000px" and "d-none" will make the element visible on screens that are 1000 or more pixels wide. This is useful for using on Table columns, if you only want some columns to be visible on larger screens.

.d-max-50px through .d-max-2600px - will only make the element visible if the screen width is less than the specified width in pixels when used with d-none.

Example: giving an element the classes "d-max-1000px" and "d-none" will make the element visible on screens that are less than 1000 pixels wide.

PreviousCreate a Data tableNextWebhooks

Last updated