Styling

You can apply several classes to any component. Classes should be separated by a space " ". We use Bootstrap 4 as a base, so any class available in the bootstrap utilities, is also available to you. They are very useful for spacing, padding and flex.

That being said, you should try to not change too much the default design of Let's Role. It's especially important if you want your sheet to become officialized.

Components

highlight-1, highlight-2

Change the background color to different shades. (Varies depending on the sheet skin)

d-none

Hides a component by default, as if it did not exist = does not take up any space. Does not work on Container components.

invisible

Hides a component by default, but maintains the space it occupies. Useful if you wish to maintain alignment between different lines that don't contain the same elements. Does not work on Container components.

clickable

Show the pointer hand cursor and turn the text orange when hovering over the component. Exactly the same visual effect as when checking the "Clickable" option for a Label component. If you use it on a column or row, it applies to all components inside it.

Spacing

To add padding (internal spacing) or margin (external spacing), see this documentation.

Text

text-tiny, text-small, text-medium, text-large, text-giant, text-gargantuan

Various sizes of text.

text-bold

Set the font weight to bold.

font-italic

Italicize the text.

text-monospace

Switches text's font to a monospace alternative. Simulates an extra typeface for your sheet. Useful for pretty UI!

text-title

A title style (bold, uppercase, text-medium)

text-uppercase, text-lowercase, text-capitalize

Display the text in a different case than the original text. (text-capitalize replaces the first letter of every word with a capital letter)

Width

w-25px, w-50px, w-75px, w-100px, w-125px, w-150px, w-175px, w-200px, w-300px

Force the width in pixels of the component.

Height

h-25px, h-50px, h-75px, h-100px, h-125px, h-150px, h-175px, h-200px, h-300px, h-400px, h-500px, h-600px, h-700px

Force the height in pixels of the component.