quicknotes/.cursor/rules/bulma-usage.mdc

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