### Tab Component Markup Example Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/alpine_js.html Example markup demonstrating how to initiate a set of tabs using the component structure. ```html Content for tab 1 Content for tab 2 Content for tab 3 ``` -------------------------------- ### Component with Slot Content Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/components.html A basic example showing how to render slot content within a component. ```html All good! Oh no! ``` -------------------------------- ### Install Django Cotton Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html Install the django-cotton package using pip. This is the first step to integrate Cotton into your Django project. ```bash pip install django-cotton ``` -------------------------------- ### Rendering Options in a Select Component Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/components.html Example of dynamically populating options for a select component using a loop. ```html {% for option in options %} {{ option }} {% endfor %} ``` -------------------------------- ### Install Django Cotton UI Package Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html Install the django-cotton-ui package using pip. This command also installs django-cotton as a dependency. ```bash pip install django-cotton-ui ``` -------------------------------- ### Basic Field Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/field.html Demonstrates the basic structure of a Field component. This is a minimal example showing just the label. ```html {% cotton:verbatim %}{% verbatim %} Email {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Component Example: Trees Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html An example of a rendered Cotton component, displaying 'Trees' with a title and content, followed by a 'Read more' link. ```html Trees ----- We have the best trees ``` -------------------------------- ### Configure Django Settings Source: https://github.com/wrabit/django-cotton/blob/main/README.md Add 'django_cotton' to your INSTALLED_APPS in settings.py. Ensure this is done before running migrations or starting the development server. ```python INSTALLED_APPS = [ 'django_cotton' ] ``` -------------------------------- ### Attribute Proxying Example Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/attribute_proxying.html Demonstrates how to use the :attrs dynamic attribute to proxy content and attributes to an inner component. ```html {% cotton:verbatim %}{% verbatim %} Content passed to inner component {% endcotton:verbatim %}{% endverbatim %} {% cotton:verbatim %}{% verbatim %} {{ slot }} {% endcotton:verbatim %}{% endverbatim %} {% cotton:verbatim %}{% verbatim %} {{ class }} {{ count }} {{ enabled }} {{ slot }} {% endcotton:verbatim %}{% endverbatim %} ``` -------------------------------- ### Final Tabs Component Content Example Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/alpine_js.html An example of the final rendered content for the tabs component after integrating Alpine.js. ```html Tab 1 content Tab 2 content Tab 3 content ``` -------------------------------- ### Proxying Attributes to Other Components Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/components.html Example of passing all attributes from one component to another. ```html {{ ''|force_escape }} ``` -------------------------------- ### Pinned Tooltip Example Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/tooltip.html Render the tooltip statically and always visible by adding the `open` attribute. This is useful for callouts or onboarding hints. ```html {% cotton:verbatim %}{% verbatim %} Pinned {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Component Example: Spades Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html An example of a rendered Cotton component, displaying 'Spades' with a title and content, followed by a 'Read more' link. ```html Spades ------ The best spades in the land ``` -------------------------------- ### Basic Tooltip Example Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/tooltip.html A simple tooltip that appears when hovering over an element. This is the most basic usage. ```html {% cotton:verbatim %}{% verbatim %} Hover Me This is a tooltip! {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Automatic Settings Configuration Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html Add 'django_cotton' to your INSTALLED_APPS for automatic configuration. This simplifies setup by letting Cotton manage required settings. ```python INSTALLED_APPS = [ 'django_cotton', ] ``` -------------------------------- ### Dialog Sizing Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/dialog.html Shows how to control the dialog's width using the 'size' prop. Examples for small and large dialogs are provided. ```html {% cotton:verbatim %}{% verbatim %} ... ... {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Button Alignment with Inputs Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/button.html Demonstrates how buttons align with inputs of the same size, ensuring consistent layout in forms. This example shows a button next to an input field. ```html {% cotton:verbatim %}{% verbatim %} Search {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Base Template Setup for Cotton UI Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html Link the precompiled stylesheet and Alpine.js bundle in your base template. Brand the UI by overriding design tokens within the section for both light and dark modes. ```html {% load static %} /* default / light mode */ :root { --color-accent: var(--color-teal-500); --color-accent-content: var(--color-teal-600); } /* dark mode */ .dark { --color-accent: var(--color-teal-400); --color-accent-content: var(--color-teal-300); } {{ slot }} ``` -------------------------------- ### Rendering Cotton Components in Django Views Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/htmx_examples.html Example of how to render a Cotton component directly from a Django view for HTMX partial responses. Ensure the component name and context are correctly passed. ```python render_component(request, "component-name", context) ``` -------------------------------- ### Generate Tailwind CSS Sources for Custom Builds Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html When using your own Tailwind CSS setup, run this command to generate a CSS file containing the kit's design tokens and class list. This file should be imported into your main CSS. ```bash python manage.py cotton_ui_sources ``` -------------------------------- ### Include a Component in a View Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html Render a Django template that includes a Cotton component. This example shows how to render 'dashboard.html' which might contain Cotton components. ```python def dashboard_view(request): return render(request, "dashboard.html") ``` -------------------------------- ### Button Component with Native Syntax Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/fundamentals.html Include a button component using native Django template tags. This example shows how to pass attributes like 'title'. ```html {{ '{%'|force_escape }} cotton button title="Click me" {{ '%}'|force_escape }} Click here {{ '{%'|force_escape }} endcotton {{ '%}'|force_escape }} ``` -------------------------------- ### Build Django Cotton Documentation Source: https://github.com/wrabit/django-cotton/blob/main/CONTRIBUTING.md Commands to build and run the documentation site locally. Add 'mac' if using an ARM chip. ```bash ./docs/docker/bin/build.sh # add 'mac' if you're on ARM chip ./docs/docker/bin/run-dev.sh ``` -------------------------------- ### Select Component with Options Source: https://github.com/wrabit/django-cotton/blob/main/README.md Demonstrates passing a list of options to a select component using the colon prefix syntax for dynamic data. ```html ``` ```html ``` ```html ``` -------------------------------- ### Open Simple Dialog Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/dialog.html Demonstrates opening a basic dialog with simple content. No header or footer are explicitly defined. ```html {% cotton:verbatim %}{% verbatim %} Open Simple Dialog ### Simple Content This is a basic dialog with just content in the default slot. No header or footer sections defined. {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Directory Structure for Compound Components Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/index_component.html Illustrates the folder structure for creating a compound component. The `index.html` serves as the default entry point for the component. ```html templates/ ├── cotton/ │ ├── card/ │ │ ├── index.html │ │ ├── header.html ``` -------------------------------- ### Select with Descriptions Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/select.html Provide additional context for each option by adding descriptions. ```html ``` -------------------------------- ### Build Django Cotton Project Source: https://github.com/wrabit/django-cotton/blob/main/CONTRIBUTING.md Run these commands from the project root to build the development environment for Django Cotton. Add 'mac' if using an ARM chip. ```bash ./dev/docker/bin/build.sh # add 'mac' if you're on ARM chip ./dev/docker/bin/run-dev.sh ``` -------------------------------- ### Initialize Syntax Highlighting and Theme Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/cotton/layouts/base.html Highlights code blocks on page load and sets the initial theme preference (dark mode by default if not specified). ```javascript hljs.highlightAll(); // On page load or when changing themes, best to add inline in `head` to avoid FOUC // Default to dark mode if no preference is set if (localStorage.theme === 'dark' || !('theme' in localStorage)) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } ``` -------------------------------- ### Basic Drawer Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/drawer.html Use the default slot for the trigger and the `content` slot for the drawer's body. Actions can be placed in the `footer` slot. Open the drawer by setting `drawerOpen` to true. ```html
Drawer body content goes here. It scrolls if it grows taller than the panel.
``` -------------------------------- ### Automate Cotton UI Sources Generation in Build Process Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html Configure your package.json to run the 'cotton_ui_sources' command as a prebuild step. This ensures the CSS sources are up-to-date before the main Tailwind build. ```json { "scripts": { "prebuild": "python manage.py cotton_ui_sources", "build": "tailwindcss -i app.css -o static/app.css --minify" } } ``` -------------------------------- ### Basic Button Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/button.html Demonstrates the fundamental usage of the button component. ```html {% cotton:verbatim %}{% verbatim %} button {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Basic Pagination Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/pagination.html Compose pagination with `c-ui.pagination` and `c-ui.pagination.item` for each page number. Use `:current="True"` for the active page and `c-ui.pagination.ellipsis` to collapse gaps. ```html {% cotton:verbatim %}{% verbatim %} 1 2 3 10 {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Nesting Components and Passing Content Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/thinking_in_components.html Demonstrates how to use a component like an HTML tag, passing attributes and nesting content, including other components. This showcases the composition capabilities of components. ```html {% verbatim %} Any HTML, or even , goes here. {% endverbatim %} ``` -------------------------------- ### Basic Composer Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/composer.html Demonstrates the basic structure of the Composer component, which includes an auto-growing textarea within a focusable shell. Type into the textarea to observe its auto-growing behavior. ```html {% cotton:verbatim %}{% verbatim %}{% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Override Muted Color for Off-Accent States Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/theming.html Customize the `--color-muted` token, used for off-accent states, to a different shade of ink. This example sets it to a softer mid-ink. ```css :root { --color-muted: var(--color-ink-600); } .dark { --color-muted: var(--color-ink-400); } ``` -------------------------------- ### Repeated Cotton Card Example Source: https://github.com/wrabit/django-cotton/blob/main/dev/example_project/example_project/templates/index.html Demonstrates a card with a title, content, button, and footer slot, similar to the 'My Override' card. Use for consistent card structures. ```html {% cotton card title="My Override" %} This is the content of my card. {% cotton button class="btn-secondary" %} Card button {% endcotton %} {% cotton:slot name="footer" %} This is the footer of my card. {{ view_context }} {% endcotton:slot %} {% endcotton %} ``` -------------------------------- ### Select Sizes Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/select.html Select components support sizes from 'xs' to '2xl', with 'md' as the default. ```html Option 1 Option 2 Option 1 Option 2 Option 1 Option 2 ``` -------------------------------- ### Calendar Selection Modes Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/calendar.html Use the `mode` attribute to specify how dates can be selected: 'single' for one date, 'range' for a start and end date, or 'multiple' for several dates. ```html
``` -------------------------------- ### Basic Component Usage Source: https://github.com/wrabit/django-cotton/blob/main/README.md Demonstrates the simplest way to use a Cotton component, passing content as a slot. ```html {{ slot }} ``` ```html Contact ``` ```html Contact ``` -------------------------------- ### Field with Label, Description, and Error Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/field.html Shows how to combine label, description, and error messages within a Field component. This example illustrates both explicit error messages and Django form integration. ```html {% cotton:verbatim %}{% verbatim %} {# Description before input #} Username This will be your public display name. {# Description after input (trailing) #} Email We'll send confirmation to this address. {% endverbatim %}{% endcotton:verbatim %} ``` ```html {% cotton:verbatim %}{% verbatim %} {# With explicit message #} Password {# With Django form integration #} Email {% endverbatim %}{% endcotton:verbatim %} ``` ```html {% cotton:verbatim %}{% verbatim %} Password Must include at least 8 characters with uppercase, lowercase, and numbers. {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Initialize Theme Studio Alpine Data Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/themes.html Sets up the Alpine.js data store for theme customization. It observes changes to the 'dark' class on the document element to dynamically update the theme. ```javascript document.addEventListener('alpine:init', () => { Alpine.data('themeStudio', () => ({ accents: [ 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose' ], grays: [ 'slate', 'gray', 'zinc', 'neutral', 'stone', 'taupe', 'mauve', 'mist', 'olive' ], shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], radii: [ ['none', '0'], ['xs', '0.125rem'], ['sm', '0.25rem'], ['md', '0.375rem'], ['lg', '0.5rem'], ['xl', '0.75rem'], ['2xl', '1rem'] ], shadows: [ ['none', 'none'], ['sm', '0 1px 2px 0 rgb(0 0 0 / 0.05)'], ['md', '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'], ['lg', '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)'] ], rings: [ ['0', '0px'], ['1', '1px'], ['2', '2px'], ['4', '4px'] ], accent: 'teal', customAccent: '#14b8a6', /* used when accent === 'custom'; any CSS colour, normalised to hex */ gray: 'zinc', radius: '0.375rem', buttonRadius: 'default', radiusLg: '0.5rem', focusRing: '2px', inputShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)', structuralShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)', borders: true, surfaceLight: 100, /* --surface-level per mode: how much lighter cards are than the page */ surfaceDark: 6, isDark: false, copied: false, _observer: null, init() { this.isDark = document.documentElement.classList.contains('dark'); // Re-apply when the appearance toggle (or navbar) flips the class. this._observer = new MutationObserver(() => { const dark = document.documentElement.classList.contains('dark'); if (dark !== this.isDark) { this.isDark = dark; this.apply(); } }); this._observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); this.apply(); }, // Theme is applied to so the whole page chrome re-themes. It is // not persisted, so navigating away (a full reload) resets it. apply() { const el = document.documentElement; const a = this._accentValues(this.isDark); if (a) { el.style.setProperty('--color-accent', a.accent); el.style.setProperty('--color-accent-content', a.content); el.style.setProperty('--color-accent-foreground', a.fg); } // Re-tone the kit neutral (--color-ink-*) this.shades.forEach((s) => el.style.removeProperty('--color-ink-' + s)); if (this.gray !== 'zinc') { const g = (n) => 'var(--color-' + this.gray + '-' + n + ')'; this.shades.forEach((s) => { el.style.setProperty('--color-ink-' + s, g(s)); }); // Drive the page bg so the whole preview follows the gray; --color-surface // derives from --color-bg + --surface-level, so it tracks the gray for free. el.style.setProperty('--color-bg', this.isDark ? g(900) : g(50)); } else { el.style.removeProperty('--color-bg'); } // Surface elevation: set --color-surface directly to the computed mix so the // preview works without relying on the kit's derivation being in this page's CSS. // (The copied snippet uses the clean --surface-level token, which the kit derives.) const level = this.isDark ? this.surfaceDark : this.surfaceLight; el.style.setProperty('--color-surface', 'color-mix(in oklab, var(--color-bg), white ' + level + '%)'); // Component tokens el.style.setProperty('--radius-control', this.radius); el.style.setProperty('--radius-box', this.radiusLg); el.style.setProperty('--radius-button', this.buttonRadius === 'full' ? 'calc(infinity * 1px)' : 'var(--radius-control)'); el.style.setProperty('--focus-ring-width', this.focusRing); el.style.setProperty('--shadow-input', this.inputShadow); el.style.setProperty('--shadow-box', this.structuralShadow); // Box-role surfaces (cards, dialogs, menus): toggle the structural border. // On → explicitly restore the gray (mode- and gray-remap-aware) so it overrides this // site's shadow-only default; off → transparent. (removeProperty wouldn't win over the // site stylesheet, so set the value directly.) el.style.setProperty('--color-card-border', this.borders ? (this.isDark ? 'var(--color-ink-700)' : 'var(--color-ink-200)') : 'transparent'); }, setAccent(a) { this.accent = a; this.apply(); }, setCustomAccent(v) { const rgb = this._rgb(v); if (!rgb) return; // ignore an unparseable value, keep the previous this.customAccent = this._hex(rgb); this.accent = 'custom'; this.apply(); }, setGray(g) { this.gray = g; this.apply(); }, // Accent → the three --color-accent* values for a mode. Named palettes reference the // scale (export stays as var() refs); a custom colour derives concrete hex: content is // a lighten/darken of the base, foreground flips black/white by luminance for contrast. })); }); ``` -------------------------------- ### Lazy Loading Popover Content Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/popover.html The popover dispatches `popover-open` and `popover-close` events. Listen for these events to load panel contents only when needed, for example, fetching data the first time the popover is shown. ```html {% cotton:verbatim %}{% verbatim %} Hover to load {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Alpine.js Shorthand x-bind with Escaped Colon Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/components.html Escape the colon in Alpine.js shorthand `x-bind` (e.g., `:example`) using `::` to ensure it's correctly passed as a single colon attribute within `{{ attrs }}`. ```html ::example ``` -------------------------------- ### Calendar Form Integration Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/calendar.html Give the calendar a `name` to submit it with a form. It writes a hidden input with the selected value, formatted by `value_format`. For ranges, specify separate names for start and end dates. ```html {# single / multiple: one name (multiple submits repeated values) #}
{# range: a start and end name #}
{# custom submitted format #}
``` -------------------------------- ### Basic Calendar Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/calendar.html Drop `c-ui.calendar` onto the page for an inline calendar. Bind selected values with `x-model` and listen for the `change` event. Add `full` to make it stretch to the container width. ```html
``` -------------------------------- ### Input with Left Addon Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/input.html Shows how to add a visual prefix to the input field using the `left_addon` slot. This is useful for currency symbols or units. ```html {% cotton:verbatim %}{% verbatim %} $ USD {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### HTMX-Powered Components with Cotton Source: https://github.com/wrabit/django-cotton/blob/main/README.md Build reusable HTMX-powered components by defining styles and markup once in a Cotton component. Different HTMX attributes can then be passed via attributes to control behavior like POST requests, confirmations, or GET requests with target swapping. ```html ``` ```html Follow Delete Post Load More ``` -------------------------------- ### Basic Navlist Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/navlist.html Demonstrates the default filled row appearance of the Navlist. No special configuration is needed for basic use. ```html {% cotton:verbatim %}{% verbatim %} Dashboard Projects Team Settings {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Composer with Prompt Box Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/composer.html Illustrates how to configure the Composer component to act as a prompt box by utilizing the 'leading' and 'trailing' slots. The entire shell remains highlighted when any control within it is focused. ```html {% cotton:verbatim %}{% verbatim %} Opus 4.8 {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Tabs with Icons Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/tabs.html Demonstrates how to include icons within tab headers using the 'icon' slot. ```html {% cotton:verbatim %}{% verbatim %} Content... Content... {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Basic Navbar Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/navbar.html Renders a basic navbar with navigation links and actions. Resize the window to observe the collapse behavior into a menu button on small screens. ```html {% cotton:verbatim %}{% verbatim %} Acme Dashboard Projects Team Settings Sign in {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Tabs with Different Sizes Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/tabs.html Shows how to apply different size variants ('sm', 'md', 'lg') to tabs. ```html {% cotton:verbatim %}{% verbatim %} Content 1 Content 2 Content 1 Content 2 {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Create Guest and User Layout Variants Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/layouts.html Extend the base layout to create specific variants for different user roles, such as guests and authenticated users. ```html {% cotton:verbatim %}{% verbatim %} {{ slot }} {% endverbatim %}{% endcotton:verbatim %} ``` ```html {% cotton:verbatim %}{% verbatim %} {{ sidebar }} {{ slot }} {% endverbatim %}{% endcotton:verbatim %} ``` ```html {% cotton:verbatim %}{% verbatim %} ...{% endverbatim %}{% endcotton:verbatim %} ``` ```html {% cotton:verbatim %}{% verbatim %} [Dashboard](/dashboard) ... ... {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Use Button Component Variants Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/home.html Demonstrates using the 'Button' component with different slot content to create distinct button appearances. ```html {% cotton:verbatim %}{% verbatim %} Save Cancel Delete {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Named Slot with HTML-like Syntax Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/fundamentals.html Illustrates how to define a named slot using HTML-like syntax for component composition. ```html ... ``` -------------------------------- ### Add Django Cotton Apps to INSTALLED_APPS Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html Include 'django_cotton' and 'django_cotton_ui' in your Django project's INSTALLED_APPS. Ensure 'django_cotton' precedes 'django_cotton_ui' for correct ordering. ```python INSTALLED_APPS = [ # ... "django_cotton", "django_cotton_ui", # ... ] ``` -------------------------------- ### Card with Header and Content Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/card.html Shows how to structure a card with distinct header and content sections for organized information display. ```html

Team Members

Manage your team and permissions

Sarah Chen

sarah@example.com

Admin

Michael Park

michael@example.com

Member

``` -------------------------------- ### Dialog with Header and Footer Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/dialog.html Illustrates using named slots for 'header' and 'footer' to structure a more complex dialog, including actions. ```html {% cotton:verbatim %}{% verbatim %} Edit Profile Edit Profile Make changes to your profile here. Click save when you're done. Cancel Save changes {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Badge Basic Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/badge.html Demonstrates the basic rendering of a badge. Use this for simple status indicators. ```html {% cotton:verbatim %}{% verbatim %} New {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Initialize and Manage Datepicker Viewport Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/datepicker_viewport.html This script initializes the datepicker when Alpine.js is ready. It ensures the picker opens correctly and handles re-opening if it closes unexpectedly. Use this for dynamic datepicker initialization. ```javascript document.addEventListener('alpine:initialized', function () { var el = document.querySelector('\\[x-data\\\[=\"datePicker\"]\\]'); if (!el) return; var data = Alpine.$data(el); var open = function () { if (data && !data.open && data.openPicker) data.openPicker(); }; open(); if (data && data.$watch) data.$watch('open', function (v) { if (!v) setTimeout(open, 60); }); }); ``` -------------------------------- ### Loading Highlight.js with Subresource Integrity Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/static/highlight/DIGESTS.md Use this HTML snippet to load Highlight.js from a CDN with the integrity attribute for security. This ensures the browser verifies the downloaded file against the provided digest. ```html ``` -------------------------------- ### Alpine.js Global Syntax Preference Store Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/cotton/layouts/base.html Manages and persists the user's syntax highlighting preference (e.g., 'html') using Alpine.js store and localStorage. ```javascript // Global syntax preference store Alpine.store('syntaxPreference', localStorage.getItem('cotton-syntax-preference') || 'html'); // Watch for changes and persist to localStorage Alpine.effect(() => { localStorage.setItem('cotton-syntax-preference', Alpine.store('syntaxPreference')); }); ``` -------------------------------- ### Conditional Rendering with Python Types Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/components.html Demonstrates how to conditionally render content based on Python types like integers and None. ```html {# prop == 1 #} ``` ```html {# prop is None #} ``` -------------------------------- ### Basic Nav Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/nav.html Renders a basic horizontal navigation bar with links. Use this for standard navigation layouts. ```django {% cotton:verbatim %}{% verbatim %} Home Features Pricing About {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Custom Settings Configuration Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html Configure Django Cotton manually by specifying 'django_cotton.apps.SimpleAppConfig' and defining custom loaders and builtins in settings.py. ```python INSTALLED_APPS = [ 'django_cotton.apps.SimpleAppConfig', ] TEMPLATES = [ { "BACKEND": "django.template.backends.django.DjangoTemplates", ... "OPTIONS": { "loaders": [( "django.template.loaders.cached.Loader", [ "django_cotton.cotton_loader.Loader", "django.template.loaders.filesystem.Loader", "django.template.loaders.app_directories.Loader", ], )], "builtins": [ "django_cotton.templatetags.cotton" ], } } ] ``` -------------------------------- ### HTML in Attributes: Django Native vs. Cotton Source: https://github.com/wrabit/django-cotton/blob/main/README.md Demonstrates how to pass HTML content within attributes. Django's native tags struggle with this, while Cotton uses slotting for cleaner integration. ```html {% my_header icon="..." %} ``` ```html ... ``` -------------------------------- ### Cotton for Reusable Components Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/home.html Shows how Cotton simplifies component reuse by allowing rich HTML content to be passed and enabling unlimited reusability without Python code. ```html {% cotton:verbatim %}{% verbatim %} {# ✅ pass rich HTML content #} **Bold**, [links](#), anything {# ✅ reuse unlimited times #} ... ... {# ✅ just an alert.html file, no Python #} No Python needed {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Navbar with Dropdown Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/navbar.html Shows how to integrate a dropdown menu directly into the navbar. The dropdown trigger should be styled to match the nav items, and the menu content can be a simple list or a multi-column layout. ```html {% cotton:verbatim %}{% verbatim %} Dashboard Resources Documentation Guides {# multi-column: any layout in the dropdown body #} ... Solutions ... ...column... ...column...{% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Passing Python Data Types (Quoteless and Colon Prefix) Source: https://github.com/wrabit/django-cotton/blob/main/README.md Illustrates two syntaxes for passing dynamic values: quoteless for simple values and colon prefix for complex expressions, including lists and dictionaries. ```html ``` -------------------------------- ### Basic Scrollspy Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/scrollspy.html Wrap your navigation in `` and ensure your sections have matching IDs. Links should call `scrollTo('id')` for smooth scrolling. Use `scroll-mt-*` utilities on sections to offset scroll targets. ```html
Introduction Content
Installation Content
Usage Content
Summary Content
``` -------------------------------- ### Card with Actions in Footer Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/card.html Demonstrates adding buttons and actions to the footer of a card, typically for user interactions like downloads. ```html

Export Data

Download your account data in CSV or JSON format. This may take a few minutes for large datasets.

Download CSV Download JSON

``` -------------------------------- ### Basic Alert Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/alert.html Displays a default 'info' variant alert with a message. This is the most basic way to show an alert. ```html {% cotton:verbatim %}{% verbatim %} A new version of the dashboard is available. {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Component with URL Attribute Source: https://github.com/wrabit/django-cotton/blob/main/README.md Shows how to pass attributes to a component, like a URL, which are then rendered in the component's template. ```html {{ slot }} ``` ```html Contact ``` ```html Contact ``` -------------------------------- ### Dropdown with Grouped Menus Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/dropdown.html Organize menu items into labeled groups using ``. This improves menu structure for complex options. ```html {% cotton:verbatim %}{% verbatim %} Undo Redo Save Open Quit {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Button Styles Reference Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/button.html Provides a reference for different button styles, including Default, Primary, Danger, and Subtle. ```html {% cotton:verbatim %}{% verbatim %} Default Primary Danger Subtle Ghost {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### Use a Card Component Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/home.html Use the defined 'Card' component like a standard HTML tag, passing content directly. ```html {% cotton:verbatim %}{% verbatim %} Simple, per-seat billing. Help when you need it. {% endverbatim %}{% endcotton:verbatim %} ``` -------------------------------- ### HTML-like Syntax for Component Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/fundamentals.html Represents a button component using HTML-like syntax, which may benefit from IDE autocompletion and highlighting. ```html ... ``` -------------------------------- ### Dynamic Components: Django Native vs. Cotton Source: https://github.com/wrabit/django-cotton/blob/main/README.md Shows how to render components dynamically. Cotton's `c-component` tag with the `:is` or `is` attribute allows for dynamic component rendering, including nested paths, which is not directly supported by Django's native tags. ```html {% {{ templatetag_name }} arg=1 %} ``` ```html ``` -------------------------------- ### Applying All Parent Attributes Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/components.html Demonstrates how to pass all attributes from a parent to an HTML element within a component. ```html {{ attrs }} ``` -------------------------------- ### Initialize and Manage Viewport Alpine.js Component Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/select_viewport.html This script initializes an Alpine.js component for managing a viewport. It ensures the component is ready, opens it if necessary, and sets up a watcher to keep it open. ```javascript document.addEventListener('alpine:initialized', function () { var el = document.querySelector('[x-data]'); if (!el) return; var data = Alpine.$data(el); var open = function () { if (data && !data.open) { data.open = true; data.$nextTick(function () { data.position && data.position(); }); } }; open(); if (data && data.$watch) data.$watch('open', function (v) { if (!v) setTimeout(open, 60); }); }); ``` -------------------------------- ### Interactive Card Links Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/card.html Shows how to make cards clickable by wrapping them in links and adding hover states for better user feedback. ```html

Documentation

Learn how to integrate our API

Support

Get help from our support team

Community

Join our developer community

``` -------------------------------- ### Test Django Cotton Project Source: https://github.com/wrabit/django-cotton/blob/main/CONTRIBUTING.md Execute this command to run tests for Django Cotton. You can append a test module path to test a specific module or method. ```bash ./dev/docker/bin/test.sh # append the test module path to test one module or test method ``` -------------------------------- ### Basic Component Structure Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/thinking_in_components.html Defines a simple component with a title and a slot for nested content. Use this as a base for creating reusable UI elements. ```html {% verbatim %} {{ title }} ---------- {{ slot }} {% endverbatim %} ``` -------------------------------- ### Setting Default Attributes with local variable definition Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/components.html Demonstrates using the `{{ ''|force_escape }}` tag to set default key-value pairs for component configuration. ```html {{ slot }} ``` -------------------------------- ### Integrate Cotton UI Sources into Custom Tailwind Build Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html Import the generated 'cotton-ui.sources.css' file into your main CSS file after Tailwind's base import. Override design tokens using :root and .dark selectors as needed. ```css @import "tailwindcss"; /* kit tokens + dark variant + class list, from `manage.py cotton_ui_sources`. Your build emits the kit's utilities (it resolves through .gitignore). */ @import "./cotton-ui.sources.css"; /* your own @source rules for your own templates (standard Tailwind, nothing kit-specific) */ @source "./your_app/templates/**/*.html"; /* brand it: override kit tokens with :root / .dark, NOT @theme (@theme loses to the kit's baked-in value; use @theme only for your own new tokens) */ :root { --color-accent: var(--color-teal-500); --color-accent-content: var(--color-teal-600); } .dark { --color-accent: var(--color-teal-400); --color-accent-content: var(--color-teal-300); } ``` -------------------------------- ### Select with Icons Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/select.html Add icons to options for enhanced visual context within the select dropdown. ```html ... ... ... ``` -------------------------------- ### Passing Simple Python Types: Django Native vs. Cotton Source: https://github.com/wrabit/django-cotton/blob/main/README.md Illustrates passing Python list, dictionary, and boolean types to components. Cotton uses a colon prefix (e.g., `:default_options`) to indicate these are direct Python types, providing them as List and Dict to the component. ```html {% my_component default_options="['yes', 'no', 'maybe']" %} {% my_component config="{'open': True}" %} {% my_component enabled="True" %} ``` ```html (provides a List and Dict to component) ``` -------------------------------- ### Native Template Syntax for Component Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/fundamentals.html Includes a component using native Django template tags, providing an alternative to HTML-like syntax. ```html {{ '{%'|force_escape }} cotton button {{ '%}'|force_escape }}...{{ '{%'|force_escape }} endcotton {{ '%}'|force_escape }} ``` -------------------------------- ### Use Dot Notation for Subfolder Components Source: https://github.com/wrabit/django-cotton/blob/main/README.md Use dot notation in component names to reference components organized in subfolders. This improves navigation in large projects. Ensure an index.html file exists in a folder to define the default component for that folder. ```html ... Success! ``` -------------------------------- ### Highlight.js File Digests Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/static/highlight/DIGESTS.md This list contains SHA384 digests for various Highlight.js files, including the main library and language modules. Use these digests with the 'integrity' attribute to verify file integrity when loading from a CDN. ```text sha384-Gmvct15f4Mo9AXQG5bk5w78N1YjBLXXU3KIV7no+mOVnApXlwfw1dwjfueAwljIV /es/languages/css.js sha384-1D7DbOic0Z5nM2ldSO9O/EsBfsg/5x7X7So1qnMgscI2ucDevptcg7cTvrD9rL0D /es/languages/css.min.js sha384-IZPwfVGChjxiFn/yRHid99p+81wHZKppqSWzWv3/VpfILbOfX+FBbsAEjyYEz+08 /es/languages/django.js sha384-c6VNDV3sM+ivvQX1L4LuDW3MjiYsC6u70/NKATWDBfdRODoECdSJ7oUhpcU/WBUi /es/languages/django.min.js sha384-Cmq5lORXzyHraasLNqmfchH07JRXyEmjDF+j6tSggoXjYHwtgX/ySW6kkRytM5uu /es/languages/python.js sha384-ZV5sgX70bBgLkDR5Mtox5UsbJedBc39hRKPdvTw6miK4lSkE/wv94cLY2iyZb/sB /es/languages/python.min.js sha384-9ECFzM+oWDye4s/MFx3QUXGo4mW43+SyLpWUDeQtWup6GZJ+KHFxVS89PmZt/fzl /es/languages/xml.js sha384-PQrsaWeWrBiE1CFRw8K335CaJuQRTjDGm73vn8bXvlwaw6RyqWObdvMTBS8B75NN /es/languages/xml.min.js sha384-bsb3QmLtUiyaiHwtrL4YoAVI9yLsjyqxgoAsk4Zd+ass9rSK1WWRiCDSu/hm8QRp /languages/css.js sha384-0XGvxIU7Oq1DQMMBr1ORiozzBq3KpZPE/74mJysWRBAop1dZ9Ioq/qRWe8u30Ded /languages/css.min.js sha384-JAYZMDzuElX+Ic47jwB+qzCzyKkmmEffC3mBnYYrJp2BlRjSorjliOzKSAG8KKTt /languages/django.js sha384-krxOUFgiyevtYl4SsL416jqrUPU3K9W6fDe/TRvWeXwLYKWKq/f+XHL2AHwGYswO /languages/django.min.js sha384-ueSSFZFqg7cVD0dpEqIk9EefJiJUYan0PH6I8u/p+bNLLx7dMs4J2keMaFXqCN8P /languages/python.js sha384-eXRt+aAa2ig1yFVDQCLis8k9s/1dikTcigj+/R07yNdIxc8BAG/b1uHDyEW3of17 /languages/python.min.js sha384-Pgzg6a405W6U1xFjjSs5i8d7V81Tmt/TYn8HFOa+u1psDc8cbs8nC7BuyNXbWWRK /languages/xml.js sha384-FQjSArDMJE4WMAJGcCNAV+IXIOljcIxM3UFAD2vxjedWmBnnDaAyqRG7AQHf/uM/ /languages/xml.min.js sha384-bqHalAvvvIeqrat+eQRoeACWPWeWt5ZgroEg52FwkWc9IQdtC2W2uREgMS45pq6E /highlight.js sha384-peJu78fxSoVFK/7Y7GKg0zxMlc+ziIAmjDz5hQFKMLW1ujAcCH0wubmBqkRlUsSv /highlight.min.js ``` -------------------------------- ### Basic Breadcrumbs Usage Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/breadcrumbs.html Compose a breadcrumb trail using `c-ui.breadcrumbs` and `c-ui.breadcrumbs.item` for each level. Mark the final item with `:current="True"` for active styling and ARIA attributes. ```html Home Library Data ``` -------------------------------- ### Include Component in Snake Case Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/fundamentals.html Use this syntax to include a component when snake_case naming is enabled. ```html {{ ""|force_escape }} ```