mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
78 lines
1.8 KiB
Plaintext
78 lines
1.8 KiB
Plaintext
---
|
|
description: Tabler Project Cursor Rules
|
|
globs:
|
|
alwaysApply: true
|
|
---
|
|
|
|
## HTML Elements Guidelines
|
|
|
|
### 1. Icons
|
|
|
|
When you need to use an icon, always use the Tabler icon include syntax:
|
|
|
|
```html
|
|
{% include "ui/icon.html" icon="ICON_NAME" %}
|
|
```
|
|
|
|
**Examples:**
|
|
|
|
- `{% include "ui/icon.html" icon="home" %}`
|
|
- `{% include "ui/icon.html" icon="building-community" %}`
|
|
- `{% include "ui/icon.html" icon="map-pin" %}`
|
|
|
|
### 2. Page Links
|
|
|
|
When linking to other pages, always use the relative page syntax:
|
|
|
|
```html
|
|
href="{{ page | relative }}/url.html"
|
|
```
|
|
|
|
**Examples:**
|
|
|
|
- `href="{{ page | relative }}/job-post.html"`
|
|
- `href="{{ page | relative }}/job-listing.html"`
|
|
- `href="{{ page | relative }}/marketing/index.html"`
|
|
|
|
### 3. Static Generation
|
|
|
|
All pages are statically generated to HTML using Eleventy (11ty). Keep this in mind when:
|
|
|
|
- Writing frontmatter (must be static YAML, no Liquid templating)
|
|
- Creating dynamic content (use Liquid templating in the body, not frontmatter)
|
|
- Linking between pages (use relative paths)
|
|
|
|
### 4. Additional Guidelines
|
|
|
|
#### Frontmatter Rules
|
|
|
|
- Frontmatter must be static YAML
|
|
- Cannot use Liquid templating in frontmatter
|
|
- Use static values for title, permalink, etc.
|
|
|
|
#### Liquid Templating
|
|
|
|
- Use Liquid templating only in the HTML body
|
|
- Access data using `{{ variable }}` syntax
|
|
- Use `{% for %}` loops for dynamic content
|
|
- Use `{% if %}` conditions for conditional rendering
|
|
|
|
#### File Structure
|
|
|
|
- Pages go in `preview/pages/`
|
|
- Includes go in `shared/includes/`
|
|
- Data files go in `shared/data/`
|
|
- Documentation goes in `docs/content/`
|
|
|
|
#### CSS Classes
|
|
|
|
- Use Bootstrap 5 classes
|
|
- Use Tabler's custom CSS classes
|
|
- Follow the pattern: `--#{$prefix}component-property`
|
|
|
|
#### Accessibility
|
|
|
|
- Include proper ARIA labels
|
|
- Use semantic HTML elements
|
|
- Ensure proper heading hierarchy
|
|
- Add alt text for images |