Shortcut: rm:ui. Foundation CSS framework, SCSS compilation, Blazor styling, and WCAG 2.1 AA accessibility. Use when writing SCSS, using Foundation CSS classes, styling Blazor components, or implementing accessibility.
wwwroot/scss/, NEVER modify CSS or use .razor.css_, included in app.scssDebug-Sass configuration: dotnet build --configuration Debug-Sass<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-6 large-4">Content</div>
<div class="cell medium-6 large-8">Content</div>
</div>
</div>
<button class="button">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button hollow">Outlined</button>
<button class="button tiny/small/large">Sizes</button>
<form>
<label
>Input Label
<input type="text" placeholder="Placeholder" />
</label>
<label
>Textarea
<textarea placeholder="Placeholder"></textarea>
</label>
<fieldset class="fieldset">
<legend>Checkbox Group</legend>
<input type="checkbox" id="chk1" /><label for="chk1">Option 1</label>
</fieldset>
</form>
<!-- Show on specific breakpoints -->
<div class="show-for-medium">Visible on medium+</div>
<div class="hide-for-large">Hidden on large</div>
<!-- Screen reader only -->
<div class="show-for-sr">Accessible only</div>
Use proper HTML5 elements:
<header>
<nav>
<main>
<section>
<article>
<footer></footer>
</article>
</section>
</main>
</nav>
</header>
Use for interactive Blazor components:
| Pattern | Code |
|---|---|
| Button state | aria-pressed="true/false" |
| Expanded | aria-expanded="true/false" |
| Label | aria-label="Close dialog" |
| Live region | aria-live="polite" |
| Invalid | aria-invalid="true" |
// Blazor: Set focus after render
await ElementRef.FocusAsync();
// Keyboard navigation: tabindex="0" for custom focusable elements
Test with:
<a class="show-for-sr" href="#main-content">Skip to main content</a>
<main id="main-content"></main>