This guide is intended for developers of InvenioRDM.
The guide covers general style guidelines.
- The default color used by Semantic UI for components (this is defined per component).
- The color used for theming your InvenioRDM.
Do's 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">).
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¶
- ✅ Do use
compactor different sizes (
small, ...) buttons.
- ❌ Don't use
Order buttons correctly:
- ✅ Cancel (standard) | Save (primary)
- ✅ Delete (negative) | ... (space) | Save (standard) | Publish (primary)
- ❌ Save (primary) | Cancel (standard)
- ❌ Cancel (negative) | Save (positive)
- ✅ Resource type
- ❌ Resource Type