User interface¶

Intended audience¶

This guide is intended for developers of InvenioRDM.

Scope¶

The guide covers general style guidelines.

User experience¶

Colors¶

Standard:
- The default color used by Semantic UI for components (this is defined per component).
Brand:
- The color used for theming your InvenioRDM.

Dos and don'ts:

✅ Do style components with logical class names (like <div class="ui brand segment">).
❌ Don't style components with color names (e.g. <div class="ui blue segment">).

Color emphasis¶

Semantic UI allows you to change the emphasis of certain components. For instance, a button can have the following emphasis:

Primary - Used for making an element more noticable (e.g. for highlighting the primary action).
Secondary - Used for making an element less noticeable.
Positive - Used for creating of big new things (example New upload, New community).
Negative - Used for dangerously destructive operations (example deleting a community).

IMPORTANT: When changing the color of a component, always think about the logic of the emphasis rather than a specific color. Always use logical names, rather than specific color names. Colors change from instance to instance, emphasis doesn't!

Button colors and order¶

Style¶

✅ Do use compact or different sizes (mini, small, ...) buttons.
❌ Don't use basic style buttons.

Order¶

Order buttons correctly:

✅ Cancel (standard) | Save (primary)
✅ Delete (negative) | ... (space) | Save (standard) | Publish (primary)
❌ Save (primary) | Cancel (standard)
❌ Cancel (negative) | Save (positive)

Capitalization¶

Form labels:

✅ Resource type
❌ Resource Type