Nicola Zangrandi
8a1263bd50
- Add reliable test execution patterns - Add dark mode implementation details - Add specific component patterns - Update examples with real-world usage
118 lines
No EOL
3.2 KiB
Text
118 lines
No EOL
3.2 KiB
Text
---
|
|
description: Standards for using Bulma CSS framework consistently across the application
|
|
globs: **/*.{svelte,css,html}
|
|
---
|
|
<rule>
|
|
When styling components:
|
|
|
|
1. Use Bulma's Built-in Classes:
|
|
- Prefer Bulma utility classes over custom CSS
|
|
- Use spacing utilities (m*, p*) for margins and padding
|
|
- Use color utilities for consistent theming
|
|
- Use responsive helpers for different screen sizes
|
|
- Use flexbox utilities for layout
|
|
|
|
2. Component Structure:
|
|
- Follow Bulma's component structure exactly
|
|
- Use proper nesting (e.g., navbar > navbar-brand > navbar-item)
|
|
- Keep modifier classes consistent with Bulma's patterns
|
|
- Use semantic Bulma classes (e.g., 'button is-primary' not custom colors)
|
|
|
|
3. Dark Mode Implementation:
|
|
- Define CSS variables in app.html for global theme
|
|
- Use --bulma-* prefix for all theme variables
|
|
- Override component-specific variables as needed
|
|
- Test all components in both light/dark modes
|
|
- Common variables to define:
|
|
```css
|
|
body.dark-mode {
|
|
--bulma-scheme-main: #1a1a1a;
|
|
--bulma-scheme-main-bis: #242424;
|
|
--bulma-scheme-main-ter: #2f2f2f;
|
|
--bulma-text: #e6e6e6;
|
|
--bulma-text-strong: #ffffff;
|
|
--bulma-border: #4a4a4a;
|
|
}
|
|
```
|
|
|
|
4. Navigation Patterns:
|
|
- Mobile: Use fixed bottom navbar
|
|
- Desktop: Use fixed left sidebar
|
|
- Handle responsive transitions cleanly
|
|
- Use consistent icon + label patterns
|
|
- Maintain active state indicators
|
|
|
|
5. Card Patterns:
|
|
- Use standard card structure:
|
|
```html
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="title is-4">Title</p>
|
|
<p class="subtitle is-6">Subtitle</p>
|
|
<div class="content">Content</div>
|
|
</div>
|
|
<footer class="card-footer">
|
|
<a class="card-footer-item">Action</a>
|
|
</footer>
|
|
</div>
|
|
```
|
|
- Keep actions in card-footer
|
|
- Use consistent spacing
|
|
- Handle long content gracefully
|
|
|
|
6. Form Patterns:
|
|
- Use standard field structure:
|
|
```html
|
|
<div class="field">
|
|
<label class="label">Label</label>
|
|
<div class="control">
|
|
<input class="input" />
|
|
</div>
|
|
</div>
|
|
```
|
|
- Group related fields with field-group
|
|
- Use appropriate input types
|
|
- Add helper text when needed
|
|
|
|
7. Responsive Design:
|
|
- Use Bulma's responsive classes
|
|
- Test all breakpoints
|
|
- Maintain consistent spacing
|
|
- Use proper container classes
|
|
- Handle mobile-specific patterns:
|
|
- Touch-friendly tap targets
|
|
- Simplified navigation
|
|
- Adjusted font sizes
|
|
- Full-width buttons
|
|
|
|
metadata:
|
|
priority: high
|
|
version: 1.1
|
|
</rule>
|
|
|
|
examples:
|
|
- input: |
|
|
# Bad: Custom dark mode colors
|
|
.dark-mode .button {
|
|
background: #333;
|
|
color: white;
|
|
}
|
|
output: |
|
|
# Good: Theme variables
|
|
body.dark-mode {
|
|
--bulma-button-background-color: #363636;
|
|
--bulma-button-color: #e6e6e6;
|
|
}
|
|
|
|
- input: |
|
|
# Bad: Inconsistent navigation
|
|
<div class="nav-mobile">...</div>
|
|
<div class="sidebar">...</div>
|
|
output: |
|
|
# Good: Responsive navigation
|
|
{#if isMobile}
|
|
<nav class="navbar is-fixed-bottom">...</nav>
|
|
{:else}
|
|
<nav class="menu is-fixed-left">...</nav>
|
|
{/if}
|
|
</rewritten_file> |