daisy-cotton-ext 0.1.0__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- daisy_cotton_ext-0.1.0/.gitignore +68 -0
- daisy_cotton_ext-0.1.0/LICENSE +21 -0
- daisy_cotton_ext-0.1.0/PKG-INFO +194 -0
- daisy_cotton_ext-0.1.0/README.md +166 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/__init__.py +3 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/apps.py +12 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/static/css/daisy-cotton-ext.css +1779 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/.gitkeep +0 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/background/glow.html +16 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/background/gradient.html +15 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/background/grid.html +16 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/background/image.html +19 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/hero/centred.html +56 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/hero/highlight.html +16 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/hero/showcase.html +58 -0
- daisy_cotton_ext-0.1.0/daisy_cotton_ext/templates/cotton/hero/split.html +53 -0
- daisy_cotton_ext-0.1.0/pyproject.toml +139 -0
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Temporary and binary files
|
|
2
|
+
*~
|
|
3
|
+
*.ruff_cache
|
|
4
|
+
*.mypy_cache
|
|
5
|
+
*.py[cod]
|
|
6
|
+
*.so
|
|
7
|
+
*.cfg
|
|
8
|
+
!.isort.cfg
|
|
9
|
+
!setup.cfg
|
|
10
|
+
*.orig
|
|
11
|
+
*.log
|
|
12
|
+
*.pot
|
|
13
|
+
**/__pycache__
|
|
14
|
+
.cache/*
|
|
15
|
+
.*.swp
|
|
16
|
+
*/.ipynb_checkpoints/*
|
|
17
|
+
.DS_Store
|
|
18
|
+
.vscode/
|
|
19
|
+
.github/instructions/
|
|
20
|
+
docs/api/
|
|
21
|
+
|
|
22
|
+
# Unittest and coverage
|
|
23
|
+
htmlcov
|
|
24
|
+
.coverage
|
|
25
|
+
.coverage.*
|
|
26
|
+
.tox
|
|
27
|
+
junit*.xml
|
|
28
|
+
coverage.xml
|
|
29
|
+
.pytest_cache/
|
|
30
|
+
|
|
31
|
+
# Build and docs folder/files
|
|
32
|
+
build/*
|
|
33
|
+
dist/*
|
|
34
|
+
sdist/*
|
|
35
|
+
docs/_rst/*
|
|
36
|
+
docs/_build/*
|
|
37
|
+
cover/*
|
|
38
|
+
MANIFEST
|
|
39
|
+
|
|
40
|
+
# Per-project virtualenvs
|
|
41
|
+
.venv*/
|
|
42
|
+
.conda*/
|
|
43
|
+
.python-version
|
|
44
|
+
|
|
45
|
+
# Django stuff:
|
|
46
|
+
*.log
|
|
47
|
+
local_settings.py
|
|
48
|
+
db.sqlite3
|
|
49
|
+
db.sqlite3-journal
|
|
50
|
+
media/
|
|
51
|
+
/static/
|
|
52
|
+
/*.sqlite3
|
|
53
|
+
|
|
54
|
+
# */static/vendor/*
|
|
55
|
+
|
|
56
|
+
# Environments
|
|
57
|
+
.env
|
|
58
|
+
.venv
|
|
59
|
+
env/
|
|
60
|
+
venv/
|
|
61
|
+
ENV/
|
|
62
|
+
env.bak/
|
|
63
|
+
venv.bak/
|
|
64
|
+
|
|
65
|
+
dist
|
|
66
|
+
|
|
67
|
+
# Node toolchain for the stylesheet build (the built CSS is committed)
|
|
68
|
+
node_modules/
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Samuel Jennings
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
Metadata-Version: 2.5
|
|
2
|
+
Name: daisy-cotton-ext
|
|
3
|
+
Version: 0.1.0
|
|
4
|
+
Summary: Extended components and page blocks for django-cotton and daisyUI, built on daisy-cotton
|
|
5
|
+
Project-URL: Homepage, https://github.com/django-mvp/daisy-cotton-ext
|
|
6
|
+
Project-URL: Repository, https://github.com/django-mvp/daisy-cotton-ext
|
|
7
|
+
Project-URL: Issues, https://github.com/django-mvp/daisy-cotton-ext/issues
|
|
8
|
+
Author-email: Samuel Jennings <samuel.scott.jennings@gmail.com>
|
|
9
|
+
License-Expression: MIT
|
|
10
|
+
License-File: LICENSE
|
|
11
|
+
Keywords: components,cotton,daisyui,django,landing-page,tailwind
|
|
12
|
+
Classifier: Development Status :: 3 - Alpha
|
|
13
|
+
Classifier: Environment :: Web Environment
|
|
14
|
+
Classifier: Framework :: Django
|
|
15
|
+
Classifier: Framework :: Django :: 5.2
|
|
16
|
+
Classifier: Framework :: Django :: 6.0
|
|
17
|
+
Classifier: Framework :: Django :: 6.1
|
|
18
|
+
Classifier: Intended Audience :: Developers
|
|
19
|
+
Classifier: License :: OSI Approved :: MIT License
|
|
20
|
+
Classifier: Natural Language :: English
|
|
21
|
+
Classifier: Programming Language :: Python :: 3.12
|
|
22
|
+
Classifier: Programming Language :: Python :: 3.13
|
|
23
|
+
Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
|
|
24
|
+
Requires-Python: <4.0,>=3.12
|
|
25
|
+
Requires-Dist: django-cotton>=2.6
|
|
26
|
+
Requires-Dist: django>=5.2
|
|
27
|
+
Description-Content-Type: text/markdown
|
|
28
|
+
|
|
29
|
+
# daisy-cotton-ext
|
|
30
|
+
|
|
31
|
+
[](https://github.com/django-mvp/daisy-cotton-ext/actions/workflows/tests.yml) [](https://codecov.io/gh/django-mvp/daisy-cotton-ext)   [](https://github.com/django-mvp/daisy-cotton-ext/blob/main/LICENSE)
|
|
32
|
+
|
|
33
|
+
Extended components and page blocks for django-cotton and daisyUI.
|
|
34
|
+
|
|
35
|
+
Built on [django-cotton](https://django-cotton.com/) and [daisyUI](https://daisyui.com/). [daisy-cotton](https://github.com/django-mvp/daisy-cotton) holds one Cotton component for each daisyUI component. This package holds what is built on top of those, and it comes in two kinds:
|
|
36
|
+
|
|
37
|
+
- **Extended components**: single components that go further than their daisyUI counterpart, such as a card with more structure than `card` gives you.
|
|
38
|
+
- **Page blocks**: whole regions of a public-facing page, such as a hero, ready to drop in.
|
|
39
|
+
|
|
40
|
+
The blocks came first, and they are what is built so far.
|
|
41
|
+
|
|
42
|
+
Component libraries in this space cover the application: navigation, forms, tables, dialogs. They stop at the pages that sit in front of it — the landing page, the pricing page, the sign-up pitch. Those get assembled by hand out of raw utility classes, in every project, every time.
|
|
43
|
+
|
|
44
|
+
Blocks are configured through attributes and take their colours from whatever daisyUI theme the project already runs, so a page built from them re-themes with the rest of the site.
|
|
45
|
+
|
|
46
|
+
## Contents
|
|
47
|
+
|
|
48
|
+
- [Status](#status)
|
|
49
|
+
- [Scope & philosophy](#scope--philosophy)
|
|
50
|
+
- [Requirements](#requirements)
|
|
51
|
+
- [Install](#install)
|
|
52
|
+
- [Blocks](#blocks)
|
|
53
|
+
- [Contributing](#contributing)
|
|
54
|
+
- [Changelog](#changelog)
|
|
55
|
+
- [License](#license)
|
|
56
|
+
|
|
57
|
+
## Status
|
|
58
|
+
|
|
59
|
+
Version 0.0.1. Two families are built, heroes and backgrounds, and nothing here is stable. Block names, attributes and the set of classes the stylesheet emits all change between minor versions, and the [CHANGELOG](https://github.com/django-mvp/daisy-cotton-ext/blob/main/CHANGELOG.md) is how a project finds out.
|
|
60
|
+
|
|
61
|
+
## Scope & philosophy
|
|
62
|
+
|
|
63
|
+
**What this is.** A presentation-only library of extended components and page blocks. Templates, a stylesheet, and the small amount of JavaScript some blocks need. Blocks are configured through attributes and themed by whatever daisyUI theme the project runs, so a page built from them never pins a literal colour into the markup.
|
|
64
|
+
|
|
65
|
+
**What this deliberately is not.**
|
|
66
|
+
|
|
67
|
+
- **Not an application.** No models, no views, no forms, no URLs, no migrations. A block's content comes from the template author, never from a queryset.
|
|
68
|
+
- **Not a CSS framework.** No daisyUI plugin, no theme layer, no preflight. Those come from the project.
|
|
69
|
+
- **Not the base components.** A component that maps one-to-one onto a daisyUI component belongs in [daisy-cotton](https://github.com/django-mvp/daisy-cotton). What lives here adds to one or combines several.
|
|
70
|
+
- **Not application chrome.** Navigation, forms, tables and CRUD pages take their content from the application, and they are somebody else's job.
|
|
71
|
+
- **Not a fixed catalogue.** The set of blocks grows as new ones are designed. There is no taxonomy to fill in.
|
|
72
|
+
- **Not page templates.** Blocks only. You pick the ones you want and assemble the page yourself. There is no one-tag landing page.
|
|
73
|
+
|
|
74
|
+
**Tie-breaks.** When two of these pull against each other: theme-driven beats hard-coded, a block that composes existing daisyUI markup beats one that invents its own, and leaving a job to the project beats doing it here.
|
|
75
|
+
|
|
76
|
+
The directions the package works toward are in [GOALS.md](https://github.com/django-mvp/daisy-cotton-ext/blob/main/GOALS.md), and the order they are being built in is in the [roadmap](https://github.com/django-mvp/daisy-cotton-ext/blob/main/docs/ROADMAP.md).
|
|
77
|
+
|
|
78
|
+
## Requirements
|
|
79
|
+
|
|
80
|
+
- Python 3.12+
|
|
81
|
+
- Django 5.2, 6.0 or 6.1
|
|
82
|
+
- django-cotton 2.6+
|
|
83
|
+
- daisyUI 5, loaded by the project
|
|
84
|
+
|
|
85
|
+
daisyUI is a hard requirement and this package does not ship it. Any project already running daisyUI satisfies it, whether through its own Tailwind build or through a package that provides one, such as [django-mvp](https://github.com/django-mvp/django-mvp).
|
|
86
|
+
|
|
87
|
+
## Install
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
pip install daisy-cotton-ext
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Add it to `INSTALLED_APPS`:
|
|
94
|
+
|
|
95
|
+
```python
|
|
96
|
+
INSTALLED_APPS = [
|
|
97
|
+
...,
|
|
98
|
+
"django_cotton",
|
|
99
|
+
"daisy_cotton_ext",
|
|
100
|
+
]
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Then load its stylesheet alongside the one carrying daisyUI:
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<link rel="stylesheet" href="{% static 'css/your-daisyui-build.css' %}">
|
|
107
|
+
<link rel="stylesheet" href="{% static 'css/daisy-cotton-ext.css' %}">
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
The two stylesheets do different jobs. Yours carries daisyUI, its themes and Tailwind's preflight. This one carries the plain Tailwind utilities the blocks need and which your build has no way to know about, because it scans your source and these templates live in site-packages. Some rules will appear in both, which costs bytes and nothing else.
|
|
111
|
+
|
|
112
|
+
Blocks are then available as Cotton tags:
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<c-hero.centred title="Ship it on Friday">
|
|
116
|
+
...
|
|
117
|
+
</c-hero.centred>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Blocks
|
|
121
|
+
|
|
122
|
+
### Heroes
|
|
123
|
+
|
|
124
|
+
Three arrangements and one inline helper. A different arrangement is a different tag rather than an option on one component, so moving a page from one to another is a one-word change.
|
|
125
|
+
|
|
126
|
+
| Tag | What it is |
|
|
127
|
+
|---|---|
|
|
128
|
+
| `<c-hero.centred>` | One column, centred. The opener for a page whose words are the product. |
|
|
129
|
+
| `<c-hero.split>` | Copy beside a visual, stacking to one column below `lg`. |
|
|
130
|
+
| `<c-hero.showcase>` | Centred copy over a wide, lifted product panel. |
|
|
131
|
+
| `<c-hero.highlight>` | An inline span that fills the words it wraps with one of daisyUI's colour pairs. Headings only. |
|
|
132
|
+
|
|
133
|
+
The three arrangements take the same attributes:
|
|
134
|
+
|
|
135
|
+
| Attribute | Default | What it does |
|
|
136
|
+
|---|---|---|
|
|
137
|
+
| `eyebrow` | — | A short line above the heading: a category, a release name |
|
|
138
|
+
| `title` | — | The heading |
|
|
139
|
+
| `lead` | — | The supporting sentence under it |
|
|
140
|
+
| `level` | `1` | Heading level, so a page carrying two heroes keeps a real heading order |
|
|
141
|
+
| `invert` | off | Light copy, for a dark background |
|
|
142
|
+
| `size` | `md` | How much vertical room the block takes: `sm`, `md`, `lg`, and `screen` on the centred arrangement |
|
|
143
|
+
| `class` | — | Extra classes on the outer section. A plain surface colour goes here: `bg-base-200` |
|
|
144
|
+
| `reverse` | off | Split only. Mirrors the two columns at `lg` and above |
|
|
145
|
+
|
|
146
|
+
And the same slots. Anything you pass that is not listed above is forwarded to the section element, so `id`, `data-` attributes and the rest reach the markup untouched.
|
|
147
|
+
|
|
148
|
+
| Slot | What goes in it |
|
|
149
|
+
|---|---|
|
|
150
|
+
| `background` | A background block, rendered into a layer behind the copy |
|
|
151
|
+
| `announcement` | Above the eyebrow. A pill linking to the latest release, usually |
|
|
152
|
+
| `actions` | The button row. Write real anchor or button markup, so it can post, submit or carry anything |
|
|
153
|
+
| `footnote` | Under the actions. A trust line, a rating, a row of logos |
|
|
154
|
+
| `media` | Split and showcase only. The picture beside or below the copy |
|
|
155
|
+
|
|
156
|
+
### Backgrounds
|
|
157
|
+
|
|
158
|
+
A background is not part of a layout, so it is not part of a block. Each one is its own block that goes in another block's `background` slot, which means any background composes with any layout.
|
|
159
|
+
|
|
160
|
+
| Tag | What it draws | Attributes |
|
|
161
|
+
|---|---|---|
|
|
162
|
+
| `<c-background.glow>` | Two heavily blurred discs of the theme's colours | `from`, `to`, `intensity` |
|
|
163
|
+
| `<c-background.gradient>` | A wash between two palette colours | `from`, `via`, `to`, `direction`, `opacity` |
|
|
164
|
+
| `<c-background.grid>` | A faint ruled grid | `size`, `intensity`, `flat` |
|
|
165
|
+
| `<c-background.image>` | A picture, dimmed by the theme's `neutral` | `src`, `dim`, `position` |
|
|
166
|
+
|
|
167
|
+
Two things to know about them. A background belongs in a `background` slot and nowhere else, because it positions itself against that slot's wrapper rather than filling its parent in normal flow. And a dark background needs `invert` on the block, since a background cannot reach up to recolour its sibling. Each block's page says whether it wants one.
|
|
168
|
+
|
|
169
|
+
```html
|
|
170
|
+
<c-hero.centred title="Ship the page, not the CSS"
|
|
171
|
+
lead="Blocks for the pages in front of your app."
|
|
172
|
+
invert>
|
|
173
|
+
<c-slot name="background">
|
|
174
|
+
<c-background.image src="{% static 'img/desk.jpg' %}" dim="strong" />
|
|
175
|
+
</c-slot>
|
|
176
|
+
<c-slot name="actions">
|
|
177
|
+
<a class="btn btn-primary btn-lg" href="{% url 'signup' %}">Get started</a>
|
|
178
|
+
</c-slot>
|
|
179
|
+
</c-hero.centred>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Every attribute, its accepted values and its default are listed on each block's own page in the example project, built from the annotations in the block's template. Run it with `python manage.py runserver` from a checkout.
|
|
183
|
+
|
|
184
|
+
## Contributing
|
|
185
|
+
|
|
186
|
+
Development setup, building the stylesheet and the rules changes are held to are in [CONTRIBUTING.md](https://github.com/django-mvp/daisy-cotton-ext/blob/main/CONTRIBUTING.md).
|
|
187
|
+
|
|
188
|
+
## Changelog
|
|
189
|
+
|
|
190
|
+
Every release is recorded in [CHANGELOG.md](https://github.com/django-mvp/daisy-cotton-ext/blob/main/CHANGELOG.md).
|
|
191
|
+
|
|
192
|
+
## License
|
|
193
|
+
|
|
194
|
+
[MIT](https://github.com/django-mvp/daisy-cotton-ext/blob/main/LICENSE)
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
# daisy-cotton-ext
|
|
2
|
+
|
|
3
|
+
[](https://github.com/django-mvp/daisy-cotton-ext/actions/workflows/tests.yml) [](https://codecov.io/gh/django-mvp/daisy-cotton-ext)   [](https://github.com/django-mvp/daisy-cotton-ext/blob/main/LICENSE)
|
|
4
|
+
|
|
5
|
+
Extended components and page blocks for django-cotton and daisyUI.
|
|
6
|
+
|
|
7
|
+
Built on [django-cotton](https://django-cotton.com/) and [daisyUI](https://daisyui.com/). [daisy-cotton](https://github.com/django-mvp/daisy-cotton) holds one Cotton component for each daisyUI component. This package holds what is built on top of those, and it comes in two kinds:
|
|
8
|
+
|
|
9
|
+
- **Extended components**: single components that go further than their daisyUI counterpart, such as a card with more structure than `card` gives you.
|
|
10
|
+
- **Page blocks**: whole regions of a public-facing page, such as a hero, ready to drop in.
|
|
11
|
+
|
|
12
|
+
The blocks came first, and they are what is built so far.
|
|
13
|
+
|
|
14
|
+
Component libraries in this space cover the application: navigation, forms, tables, dialogs. They stop at the pages that sit in front of it — the landing page, the pricing page, the sign-up pitch. Those get assembled by hand out of raw utility classes, in every project, every time.
|
|
15
|
+
|
|
16
|
+
Blocks are configured through attributes and take their colours from whatever daisyUI theme the project already runs, so a page built from them re-themes with the rest of the site.
|
|
17
|
+
|
|
18
|
+
## Contents
|
|
19
|
+
|
|
20
|
+
- [Status](#status)
|
|
21
|
+
- [Scope & philosophy](#scope--philosophy)
|
|
22
|
+
- [Requirements](#requirements)
|
|
23
|
+
- [Install](#install)
|
|
24
|
+
- [Blocks](#blocks)
|
|
25
|
+
- [Contributing](#contributing)
|
|
26
|
+
- [Changelog](#changelog)
|
|
27
|
+
- [License](#license)
|
|
28
|
+
|
|
29
|
+
## Status
|
|
30
|
+
|
|
31
|
+
Version 0.0.1. Two families are built, heroes and backgrounds, and nothing here is stable. Block names, attributes and the set of classes the stylesheet emits all change between minor versions, and the [CHANGELOG](https://github.com/django-mvp/daisy-cotton-ext/blob/main/CHANGELOG.md) is how a project finds out.
|
|
32
|
+
|
|
33
|
+
## Scope & philosophy
|
|
34
|
+
|
|
35
|
+
**What this is.** A presentation-only library of extended components and page blocks. Templates, a stylesheet, and the small amount of JavaScript some blocks need. Blocks are configured through attributes and themed by whatever daisyUI theme the project runs, so a page built from them never pins a literal colour into the markup.
|
|
36
|
+
|
|
37
|
+
**What this deliberately is not.**
|
|
38
|
+
|
|
39
|
+
- **Not an application.** No models, no views, no forms, no URLs, no migrations. A block's content comes from the template author, never from a queryset.
|
|
40
|
+
- **Not a CSS framework.** No daisyUI plugin, no theme layer, no preflight. Those come from the project.
|
|
41
|
+
- **Not the base components.** A component that maps one-to-one onto a daisyUI component belongs in [daisy-cotton](https://github.com/django-mvp/daisy-cotton). What lives here adds to one or combines several.
|
|
42
|
+
- **Not application chrome.** Navigation, forms, tables and CRUD pages take their content from the application, and they are somebody else's job.
|
|
43
|
+
- **Not a fixed catalogue.** The set of blocks grows as new ones are designed. There is no taxonomy to fill in.
|
|
44
|
+
- **Not page templates.** Blocks only. You pick the ones you want and assemble the page yourself. There is no one-tag landing page.
|
|
45
|
+
|
|
46
|
+
**Tie-breaks.** When two of these pull against each other: theme-driven beats hard-coded, a block that composes existing daisyUI markup beats one that invents its own, and leaving a job to the project beats doing it here.
|
|
47
|
+
|
|
48
|
+
The directions the package works toward are in [GOALS.md](https://github.com/django-mvp/daisy-cotton-ext/blob/main/GOALS.md), and the order they are being built in is in the [roadmap](https://github.com/django-mvp/daisy-cotton-ext/blob/main/docs/ROADMAP.md).
|
|
49
|
+
|
|
50
|
+
## Requirements
|
|
51
|
+
|
|
52
|
+
- Python 3.12+
|
|
53
|
+
- Django 5.2, 6.0 or 6.1
|
|
54
|
+
- django-cotton 2.6+
|
|
55
|
+
- daisyUI 5, loaded by the project
|
|
56
|
+
|
|
57
|
+
daisyUI is a hard requirement and this package does not ship it. Any project already running daisyUI satisfies it, whether through its own Tailwind build or through a package that provides one, such as [django-mvp](https://github.com/django-mvp/django-mvp).
|
|
58
|
+
|
|
59
|
+
## Install
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
pip install daisy-cotton-ext
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Add it to `INSTALLED_APPS`:
|
|
66
|
+
|
|
67
|
+
```python
|
|
68
|
+
INSTALLED_APPS = [
|
|
69
|
+
...,
|
|
70
|
+
"django_cotton",
|
|
71
|
+
"daisy_cotton_ext",
|
|
72
|
+
]
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Then load its stylesheet alongside the one carrying daisyUI:
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<link rel="stylesheet" href="{% static 'css/your-daisyui-build.css' %}">
|
|
79
|
+
<link rel="stylesheet" href="{% static 'css/daisy-cotton-ext.css' %}">
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The two stylesheets do different jobs. Yours carries daisyUI, its themes and Tailwind's preflight. This one carries the plain Tailwind utilities the blocks need and which your build has no way to know about, because it scans your source and these templates live in site-packages. Some rules will appear in both, which costs bytes and nothing else.
|
|
83
|
+
|
|
84
|
+
Blocks are then available as Cotton tags:
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<c-hero.centred title="Ship it on Friday">
|
|
88
|
+
...
|
|
89
|
+
</c-hero.centred>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Blocks
|
|
93
|
+
|
|
94
|
+
### Heroes
|
|
95
|
+
|
|
96
|
+
Three arrangements and one inline helper. A different arrangement is a different tag rather than an option on one component, so moving a page from one to another is a one-word change.
|
|
97
|
+
|
|
98
|
+
| Tag | What it is |
|
|
99
|
+
|---|---|
|
|
100
|
+
| `<c-hero.centred>` | One column, centred. The opener for a page whose words are the product. |
|
|
101
|
+
| `<c-hero.split>` | Copy beside a visual, stacking to one column below `lg`. |
|
|
102
|
+
| `<c-hero.showcase>` | Centred copy over a wide, lifted product panel. |
|
|
103
|
+
| `<c-hero.highlight>` | An inline span that fills the words it wraps with one of daisyUI's colour pairs. Headings only. |
|
|
104
|
+
|
|
105
|
+
The three arrangements take the same attributes:
|
|
106
|
+
|
|
107
|
+
| Attribute | Default | What it does |
|
|
108
|
+
|---|---|---|
|
|
109
|
+
| `eyebrow` | — | A short line above the heading: a category, a release name |
|
|
110
|
+
| `title` | — | The heading |
|
|
111
|
+
| `lead` | — | The supporting sentence under it |
|
|
112
|
+
| `level` | `1` | Heading level, so a page carrying two heroes keeps a real heading order |
|
|
113
|
+
| `invert` | off | Light copy, for a dark background |
|
|
114
|
+
| `size` | `md` | How much vertical room the block takes: `sm`, `md`, `lg`, and `screen` on the centred arrangement |
|
|
115
|
+
| `class` | — | Extra classes on the outer section. A plain surface colour goes here: `bg-base-200` |
|
|
116
|
+
| `reverse` | off | Split only. Mirrors the two columns at `lg` and above |
|
|
117
|
+
|
|
118
|
+
And the same slots. Anything you pass that is not listed above is forwarded to the section element, so `id`, `data-` attributes and the rest reach the markup untouched.
|
|
119
|
+
|
|
120
|
+
| Slot | What goes in it |
|
|
121
|
+
|---|---|
|
|
122
|
+
| `background` | A background block, rendered into a layer behind the copy |
|
|
123
|
+
| `announcement` | Above the eyebrow. A pill linking to the latest release, usually |
|
|
124
|
+
| `actions` | The button row. Write real anchor or button markup, so it can post, submit or carry anything |
|
|
125
|
+
| `footnote` | Under the actions. A trust line, a rating, a row of logos |
|
|
126
|
+
| `media` | Split and showcase only. The picture beside or below the copy |
|
|
127
|
+
|
|
128
|
+
### Backgrounds
|
|
129
|
+
|
|
130
|
+
A background is not part of a layout, so it is not part of a block. Each one is its own block that goes in another block's `background` slot, which means any background composes with any layout.
|
|
131
|
+
|
|
132
|
+
| Tag | What it draws | Attributes |
|
|
133
|
+
|---|---|---|
|
|
134
|
+
| `<c-background.glow>` | Two heavily blurred discs of the theme's colours | `from`, `to`, `intensity` |
|
|
135
|
+
| `<c-background.gradient>` | A wash between two palette colours | `from`, `via`, `to`, `direction`, `opacity` |
|
|
136
|
+
| `<c-background.grid>` | A faint ruled grid | `size`, `intensity`, `flat` |
|
|
137
|
+
| `<c-background.image>` | A picture, dimmed by the theme's `neutral` | `src`, `dim`, `position` |
|
|
138
|
+
|
|
139
|
+
Two things to know about them. A background belongs in a `background` slot and nowhere else, because it positions itself against that slot's wrapper rather than filling its parent in normal flow. And a dark background needs `invert` on the block, since a background cannot reach up to recolour its sibling. Each block's page says whether it wants one.
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<c-hero.centred title="Ship the page, not the CSS"
|
|
143
|
+
lead="Blocks for the pages in front of your app."
|
|
144
|
+
invert>
|
|
145
|
+
<c-slot name="background">
|
|
146
|
+
<c-background.image src="{% static 'img/desk.jpg' %}" dim="strong" />
|
|
147
|
+
</c-slot>
|
|
148
|
+
<c-slot name="actions">
|
|
149
|
+
<a class="btn btn-primary btn-lg" href="{% url 'signup' %}">Get started</a>
|
|
150
|
+
</c-slot>
|
|
151
|
+
</c-hero.centred>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
Every attribute, its accepted values and its default are listed on each block's own page in the example project, built from the annotations in the block's template. Run it with `python manage.py runserver` from a checkout.
|
|
155
|
+
|
|
156
|
+
## Contributing
|
|
157
|
+
|
|
158
|
+
Development setup, building the stylesheet and the rules changes are held to are in [CONTRIBUTING.md](https://github.com/django-mvp/daisy-cotton-ext/blob/main/CONTRIBUTING.md).
|
|
159
|
+
|
|
160
|
+
## Changelog
|
|
161
|
+
|
|
162
|
+
Every release is recorded in [CHANGELOG.md](https://github.com/django-mvp/daisy-cotton-ext/blob/main/CHANGELOG.md).
|
|
163
|
+
|
|
164
|
+
## License
|
|
165
|
+
|
|
166
|
+
[MIT](https://github.com/django-mvp/daisy-cotton-ext/blob/main/LICENSE)
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"""The Django app configuration for the package."""
|
|
2
|
+
|
|
3
|
+
from django.apps import AppConfig
|
|
4
|
+
from django.utils.translation import gettext_lazy as _
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
class DaisyCottonExtConfig(AppConfig):
|
|
8
|
+
"""Register the package's Cotton components with a Django project."""
|
|
9
|
+
|
|
10
|
+
name = "daisy_cotton_ext"
|
|
11
|
+
label = "daisy_cotton_ext"
|
|
12
|
+
verbose_name = _("Extended components and page blocks")
|