Nicola Zangrandi
c1873066eb
- Add tests for note creation, editing, and linking - Configure Playwright for cross-browser testing - Ensure reliable test execution with proper waits - Use single worker due to shared database state
107 lines
No EOL
2.9 KiB
Text
107 lines
No EOL
2.9 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. 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> |