Frontend-design Skill
Sorcha uses MudBlazor 8.15.0 for Material Design components with CSS Isolation as the primary styling approach. The design system follows Material Design 3 with custom extensions for blockchain/workflow visualization.
Quick Start
Styling a New Component
@* MyComponent.razor *@
<MudPaper Elevation="1" Class="pa-4 mb-3">
<MudText Typo="Typo.h6" Class="mb-2">Component Title</MudText>
<MudText Typo="Typo.body2" Color="Color.Secondary">
Description text
</MudText>
</MudPaper>Custom Component with CSS Isolation
@* MyCard.razor *@
<div class="custom-card @(IsSelected ? "selected" : "")">
<div class="card-header">@Title</div>
<div class="card-content">@ChildContent</div>
</div>
@code {
[Parameter] public string Title { get; set; } = "";
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public bool IsSelected { get; set; }
}/* MyCard.razor.css */
.custom-card {
background: white;
border: 2px solid #1976d2;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
transition: all 0.2s ease;
}
.custom-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
transform: translateY(-2px);
}
.custom-card.selected {
border-color: #0d47a1;
border-width: 3px;
}Key Concepts
| Concept | Usage | Example |
|---|---|---|
| CSS Isolation | Component-scoped styles | Component.razor.css |
| MudBlazor Utility | Spacing, flex, alignment | Class="d-flex pa-4 mb-3" |
| Color System | Semantic colors | Color.Primary, Color.Error |
| Typography | Text hierarchy | Typo.h6, Typo.body2 |
| Elevation | Shadow depth | Elevation="1" (0-24) |
| Breakpoint | Responsive | Breakpoint.Sm (641px) |
Common Patterns
Flex Layout with Gap
<div class="d-flex align-center gap-2 mb-3">
<MudIcon Icon="@Icons.Material.Filled.Settings" />
<MudText Typo="Typo.body1">Settings</MudText>
<MudSpacer />
<MudChip T="string" Size="Size.Small" Color="Color.Info">Active</MudChip>
</div>Panel with Header/Content Pattern
<MudPaper Elevation="1" Class="panel">
<div class="panel-header">
<MudText Typo="Typo.subtitle1">Panel Title</MudText>
</div>
<div class="panel-content">
@* Content here *@
</div>
</MudPaper>See Also
- aesthetics - Color system, typography, brand identity
- components - MudBlazor component patterns
- layouts - Page structure, responsive grids
- motion - Transitions, hover effects
- patterns - DO/DON'T design decisions
Related Skills
- See the blazor skill for component lifecycle and state management
- See the signalr skill for real-time UI updates