--- 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>