---
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. Custom Styles:
   - Only add custom CSS when Bulma doesn't provide the functionality
   - Document why custom CSS is needed
   - Use Bulma's CSS variables for theming
   - Keep custom styles minimal and focused

4. Dark Mode:
   - Use Bulma's CSS variables for theming
   - Override colors using CSS variables, not direct colors
   - Maintain consistent contrast ratios
   - Test dark mode for all components

5. Responsive Design:
   - Use Bulma's responsive classes (is-*-mobile, is-*-tablet, etc.)
   - Test all breakpoints
   - Maintain consistent spacing across screen sizes
   - Use proper container classes

6. Common Patterns:
   - Forms: field > label + control > input
   - Buttons: button + is-* modifiers
   - Cards: card > card-header + card-content + card-footer
   - Navigation: navbar with proper structure
   - Grid: columns > column with proper sizes

7. Performance:
   - Don't duplicate Bulma styles
   - Minimize custom CSS
   - Use Bulma's minified version
   - Remove unused Bulma features if size is a concern

metadata:
  priority: high
  version: 1.0
</rule>

examples:
  - input: |
      # Bad: Custom styles for spacing
      <style>
        .my-component {
          margin-bottom: 20px;
          padding: 15px;
        }
      </style>
    output: |
      <!-- Good: Bulma utilities -->
      <div class="mb-5 p-4">...</div>

  - input: |
      # Bad: Custom color styles
      <style>
        .custom-button {
          background: #3273dc;
          color: white;
        }
      </style>
    output: |
      <!-- Good: Bulma color classes -->
      <button class="button is-primary">...</button>

  - input: |
      # Bad: Custom responsive styles
      <style>
        @media (max-width: 768px) {
          .hide-mobile { display: none; }
        }
      </style>
    output: |
      <!-- Good: Bulma responsive classes -->
      <div class="is-hidden-mobile">...</div>

  - input: |
      # Bad: Inconsistent form structure
      <div>
        <label>Name</label>
        <input type="text">
      </div>
    output: |
      <!-- Good: Bulma form structure -->
      <div class="field">
        <label class="label">Name</label>
        <div class="control">
          <input class="input" type="text">
        </div>
      </div>
</rewritten_file>