|
|
@@ -0,0 +1,78 @@
|
|
|
+---
|
|
|
+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
|
codecalm