labbdocs 0.0.1a0__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.
- labbdocs-0.0.1a0/LICENSE +21 -0
- labbdocs-0.0.1a0/PKG-INFO +111 -0
- labbdocs-0.0.1a0/README.md +78 -0
- labbdocs-0.0.1a0/labbdocs/__init__.py +1 -0
- labbdocs-0.0.1a0/labbdocs/apps.py +7 -0
- labbdocs-0.0.1a0/labbdocs/content/icons/1_getting_started/1_introduction.md +28 -0
- labbdocs-0.0.1a0/labbdocs/content/icons/1_getting_started/2_installation.md +71 -0
- labbdocs-0.0.1a0/labbdocs/content/icons/1_getting_started/3_quick_start.md +125 -0
- labbdocs-0.0.1a0/labbdocs/content/icons/2_packs/1_remix.md +14 -0
- labbdocs-0.0.1a0/labbdocs/content/icons/2_packs/more.md +1 -0
- labbdocs-0.0.1a0/labbdocs/content/icons/index.md +4 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/1_getting_started/1_introduction.md +27 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/1_getting_started/2_installation.md +177 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/1_getting_started/3_quick_start.md +134 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/1_getting_started/4_theming.md +365 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/1_getting_started/5_building_css.md +201 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/2_references/0_labb_cli.md +611 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/2_references/1_config_yaml.md +171 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/2_references/2_django_settings.md +78 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/2_references/3_lb_tags.md +201 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/2_references/4_c-lb.m.md +47 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/2_references/5_llms.txt.md +201 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/accordion.md +29 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/alert.md +40 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/avatar.md +46 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/badge.md +41 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/button.md +38 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/card.md +57 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/checkbox.md +23 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/drawer.md +62 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/dropdown.md +35 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/fab.md +67 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/menu.md +56 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/modal.md +62 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/navbar.md +46 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/swap.md +51 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/table.md +24 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/tabs.md +32 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/theme-controller.md +23 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/3_components/1_basics/toggle.md +26 -0
- labbdocs-0.0.1a0/labbdocs/content/ui/index.md +1 -0
- labbdocs-0.0.1a0/labbdocs/doc_parser.py +438 -0
- labbdocs-0.0.1a0/labbdocs/management/__init__.py +0 -0
- labbdocs-0.0.1a0/labbdocs/management/commands/__init__.py +0 -0
- labbdocs-0.0.1a0/labbdocs/management/commands/build_docs.py +89 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/css/highlight-custom.css +13 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/css/highlight.min.css +10 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/img/stock/avatar.png +0 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/img/stock/mecca.jpg +0 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/img/stock/placeholder-small.png +0 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/img/stock/placeholder.svg +1 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/img/stock/shoe.jpg +0 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/js/common.js +57 -0
- labbdocs-0.0.1a0/labbdocs/static/lbdocs/js/highlight.min.js +1213 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/api_table.html +155 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/codeblock.html +8 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/codeblock_title.html +14 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/component_example/index.html +9 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/component_example/section/code.html +7 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/component_example/section/preview.html +23 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/component_example/style/code_only.html +8 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/component_example/style/inline.html +17 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/component_example/style/stacked.html +22 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/component_example/style/tab.html +16 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/copy_button.html +18 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/daisy_ui_icon.html +16 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/icon_browser.html +444 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/indented_block.html +8 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/layout/base.html +28 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/layout/docs/base.html +113 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/layout/docs/component.html +3 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/layout/docs/header.html +88 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/page_navigator.html +37 -0
- labbdocs-0.0.1a0/labbdocs/templates/cotton/lbdocs/topnav.html +128 -0
- labbdocs-0.0.1a0/labbdocs/templates/lbdocs/pages/docs.html +1 -0
- labbdocs-0.0.1a0/labbdocs/templatetags/__init__.py +0 -0
- labbdocs-0.0.1a0/labbdocs/templatetags/docs_tags.py +112 -0
- labbdocs-0.0.1a0/labbdocs/urls.py +18 -0
- labbdocs-0.0.1a0/labbdocs/views.py +145 -0
- labbdocs-0.0.1a0/pyproject.toml +51 -0
labbdocs-0.0.1a0/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Zadiq Oguntimehin
|
|
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,111 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: labbdocs
|
|
3
|
+
Version: 0.0.1a0
|
|
4
|
+
Summary: Documentation for the labb project
|
|
5
|
+
License: MIT
|
|
6
|
+
License-File: LICENSE
|
|
7
|
+
Keywords: django,ui,components,library,perfect,django-cotton,tailwind,daisyui
|
|
8
|
+
Author: zadiq
|
|
9
|
+
Author-email: dev@zadiq.com
|
|
10
|
+
Requires-Python: >=3.9,<4
|
|
11
|
+
Classifier: Development Status :: 3 - Alpha
|
|
12
|
+
Classifier: Intended Audience :: Developers
|
|
13
|
+
Classifier: License :: OSI Approved :: MIT License
|
|
14
|
+
Classifier: Programming Language :: Python :: 3
|
|
15
|
+
Classifier: Programming Language :: Python :: 3 :: Only
|
|
16
|
+
Classifier: Programming Language :: Python :: 3.9
|
|
17
|
+
Classifier: Programming Language :: Python :: 3.10
|
|
18
|
+
Classifier: Programming Language :: Python :: 3.11
|
|
19
|
+
Classifier: Programming Language :: Python :: 3.12
|
|
20
|
+
Classifier: Programming Language :: Python :: 3.13
|
|
21
|
+
Classifier: Framework :: Django
|
|
22
|
+
Classifier: Intended Audience :: Developers
|
|
23
|
+
Classifier: Operating System :: OS Independent
|
|
24
|
+
Requires-Dist: django (>=4.2)
|
|
25
|
+
Requires-Dist: markdown (>=3.9,<4.0)
|
|
26
|
+
Requires-Dist: python-frontmatter (>=1.1.0,<2.0.0)
|
|
27
|
+
Requires-Dist: pyyaml (>=6.0.3,<7.0.0)
|
|
28
|
+
Project-URL: Documentation, https://labb.io/docs
|
|
29
|
+
Project-URL: Discussions, https://github.com/labbhq/labb/discussions
|
|
30
|
+
Project-URL: Source, https://github.com/labbhq/labb/tree/main/docs
|
|
31
|
+
Description-Content-Type: text/markdown
|
|
32
|
+
|
|
33
|
+
# labbdocs
|
|
34
|
+
|
|
35
|
+
The documentation is available online at [https://labb.io/docs](https://labb.io/docs).
|
|
36
|
+
|
|
37
|
+
This documentation is installed as a django app in the django project that powers the [labb.io](https://labb.io) website.
|
|
38
|
+
|
|
39
|
+
## Installation
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
pip install labbdocs
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Integration with a django site
|
|
46
|
+
|
|
47
|
+
### 1. Add to INSTALLED_APPS
|
|
48
|
+
|
|
49
|
+
Add `labbdocs` to your Django project's `INSTALLED_APPS`:
|
|
50
|
+
|
|
51
|
+
```python
|
|
52
|
+
# settings.py
|
|
53
|
+
INSTALLED_APPS = [
|
|
54
|
+
# ... other apps
|
|
55
|
+
'labbdocs',
|
|
56
|
+
]
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 2. Configure LABB_DOCS
|
|
60
|
+
|
|
61
|
+
Set up your documentation configuration in your Django settings:
|
|
62
|
+
|
|
63
|
+
```python
|
|
64
|
+
# settings.py
|
|
65
|
+
LABB_DOCS = {
|
|
66
|
+
"ui": {
|
|
67
|
+
"config": "/path/to/your/ui.yaml",
|
|
68
|
+
"title": "UI Components",
|
|
69
|
+
"name": "ui",
|
|
70
|
+
"url_prefix": "/docs/ui",
|
|
71
|
+
"template_dir": "labbdocs/docs/ui/",
|
|
72
|
+
"build_path": "/path/to/templates/build/docs/ui"
|
|
73
|
+
},
|
|
74
|
+
"icons": {
|
|
75
|
+
"config": "/path/to/your/icons.yaml",
|
|
76
|
+
"title": "Icon Library",
|
|
77
|
+
"name": "icons",
|
|
78
|
+
"url_prefix": "/docs/icons",
|
|
79
|
+
"template_dir": "labbdocs/docs/icons/",
|
|
80
|
+
"build_path": "/path/to/templates/build/docs/icons"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### 3. Include URLs
|
|
86
|
+
|
|
87
|
+
Add labbdocs URLs to your main URL configuration:
|
|
88
|
+
|
|
89
|
+
```python
|
|
90
|
+
# urls.py
|
|
91
|
+
from django.urls import path, include
|
|
92
|
+
|
|
93
|
+
urlpatterns = [
|
|
94
|
+
# ... other patterns
|
|
95
|
+
path("", include("labbdocs.urls")),
|
|
96
|
+
]
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### 4. Build Documentation
|
|
100
|
+
|
|
101
|
+
Use the management command to build your documentation:
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
# Build all documentation
|
|
105
|
+
python manage.py build_docs ui
|
|
106
|
+
python manage.py build_docs icons
|
|
107
|
+
|
|
108
|
+
# Or build with quiet output
|
|
109
|
+
python manage.py build_docs ui --quiet
|
|
110
|
+
```
|
|
111
|
+
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# labbdocs
|
|
2
|
+
|
|
3
|
+
The documentation is available online at [https://labb.io/docs](https://labb.io/docs).
|
|
4
|
+
|
|
5
|
+
This documentation is installed as a django app in the django project that powers the [labb.io](https://labb.io) website.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pip install labbdocs
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Integration with a django site
|
|
14
|
+
|
|
15
|
+
### 1. Add to INSTALLED_APPS
|
|
16
|
+
|
|
17
|
+
Add `labbdocs` to your Django project's `INSTALLED_APPS`:
|
|
18
|
+
|
|
19
|
+
```python
|
|
20
|
+
# settings.py
|
|
21
|
+
INSTALLED_APPS = [
|
|
22
|
+
# ... other apps
|
|
23
|
+
'labbdocs',
|
|
24
|
+
]
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 2. Configure LABB_DOCS
|
|
28
|
+
|
|
29
|
+
Set up your documentation configuration in your Django settings:
|
|
30
|
+
|
|
31
|
+
```python
|
|
32
|
+
# settings.py
|
|
33
|
+
LABB_DOCS = {
|
|
34
|
+
"ui": {
|
|
35
|
+
"config": "/path/to/your/ui.yaml",
|
|
36
|
+
"title": "UI Components",
|
|
37
|
+
"name": "ui",
|
|
38
|
+
"url_prefix": "/docs/ui",
|
|
39
|
+
"template_dir": "labbdocs/docs/ui/",
|
|
40
|
+
"build_path": "/path/to/templates/build/docs/ui"
|
|
41
|
+
},
|
|
42
|
+
"icons": {
|
|
43
|
+
"config": "/path/to/your/icons.yaml",
|
|
44
|
+
"title": "Icon Library",
|
|
45
|
+
"name": "icons",
|
|
46
|
+
"url_prefix": "/docs/icons",
|
|
47
|
+
"template_dir": "labbdocs/docs/icons/",
|
|
48
|
+
"build_path": "/path/to/templates/build/docs/icons"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 3. Include URLs
|
|
54
|
+
|
|
55
|
+
Add labbdocs URLs to your main URL configuration:
|
|
56
|
+
|
|
57
|
+
```python
|
|
58
|
+
# urls.py
|
|
59
|
+
from django.urls import path, include
|
|
60
|
+
|
|
61
|
+
urlpatterns = [
|
|
62
|
+
# ... other patterns
|
|
63
|
+
path("", include("labbdocs.urls")),
|
|
64
|
+
]
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### 4. Build Documentation
|
|
68
|
+
|
|
69
|
+
Use the management command to build your documentation:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
# Build all documentation
|
|
73
|
+
python manage.py build_docs ui
|
|
74
|
+
python manage.py build_docs icons
|
|
75
|
+
|
|
76
|
+
# Or build with quiet output
|
|
77
|
+
python manage.py build_docs ui --quiet
|
|
78
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
__version__ = "0.0.1a"
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Introduction
|
|
3
|
+
description: Beautiful, accessible, and customizable icon components for your Django projects.
|
|
4
|
+
doc_show_toc: False
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<c-lbdocs.component_example path="introduction/welcome-card" style="stacked" />
|
|
8
|
+
|
|
9
|
+
The labb Icons library provides a comprehensive set of reusable icon components that integrate seamlessly with Django Cotton. Whether you need simple interface icons or complex illustrations, these components will help you create consistent, professional designs quickly.
|
|
10
|
+
|
|
11
|
+
labb Icons allow you to use icons with familiar HTML tag structure. Instead of complex SVG markup or external icon libraries, you can use simple, intuitive component tags that look and feel like regular HTML elements. This makes your templates more readable and maintainable while providing powerful functionality under the hood.
|
|
12
|
+
|
|
13
|
+
All icons are rendered on the backend, ensuring fast page loads and excellent SEO. Icons work without JavaScript by default, making them accessible and performant out of the box.
|
|
14
|
+
|
|
15
|
+
## What is labb Icons?
|
|
16
|
+
|
|
17
|
+
labb Icons is a Django icon component library that provides beautiful, accessible, and customizable icon components. Built on top of Django Cotton and integrated with popular icon sets like Remix Icons, it offers a modern approach to using icons in Django projects.
|
|
18
|
+
|
|
19
|
+
## Key Features
|
|
20
|
+
|
|
21
|
+
- **Django Cotton Integration**: Icons are built using Django Cotton for seamless template composition and reusability.
|
|
22
|
+
- **Multiple Icon Packs**: Support for popular icon sets like Remix Icons, with more packs coming soon.
|
|
23
|
+
- **Fill & Line Variants**: Most icons support both filled and outlined variants for design flexibility.
|
|
24
|
+
- **No JavaScript Required**: Icons work without JavaScript, ensuring accessibility and performance.
|
|
25
|
+
- **Backend Rendered**: All icon components are rendered on the server for fast page loads and better SEO.
|
|
26
|
+
- **Customizable**: Easy sizing and styling through CSS classes and attributes.
|
|
27
|
+
- **Smart Defaults**: Line variants are the default, with easy switching to fill variants.
|
|
28
|
+
- **AI and LLM Friendly**: Accessible documentation and code examples for AI and LLM use cases.
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Installation
|
|
3
|
+
description: Learn how to install and set up labb Icons in your Django project.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
{% load docs_tags %}
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Install labb Icons
|
|
12
|
+
|
|
13
|
+
### Using pip
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pip install labbicons
|
|
17
|
+
# or both labbui and labbicons
|
|
18
|
+
pip install labbui[icons]
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Using Poetry
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
poetry add labbicons
|
|
25
|
+
# or both labbui and labbicons
|
|
26
|
+
poetry add labbui[icons]
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Add to Django Settings
|
|
30
|
+
|
|
31
|
+
Add `labbicons` to your `INSTALLED_APPS`:
|
|
32
|
+
|
|
33
|
+
```python
|
|
34
|
+
INSTALLED_APPS = [
|
|
35
|
+
# ... other apps
|
|
36
|
+
'django_cotton',
|
|
37
|
+
# 'labb', # optional, add if you are using the labb components
|
|
38
|
+
'labbicons',
|
|
39
|
+
]
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
> **Note**: labb Icons only requires the `django-cotton` package and can be used independently of the labb UI components in any Django project. If you have already installed `labb`, you would have already <a href="{% doc_url '1_getting_started/2_installation.md' 'ui' %}#add-to-django-settings">added</a> `django_cotton`.
|
|
43
|
+
|
|
44
|
+
## Basic Usage
|
|
45
|
+
|
|
46
|
+
Once installed, you can start using icons in your templates:
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<!-- Basic usage -->
|
|
50
|
+
<c-lbi.rmx.heart w="24" h="24" class="text-red-500" />
|
|
51
|
+
|
|
52
|
+
<!-- Fill variant -->
|
|
53
|
+
<c-lbi.rmx.heart w="24" h="24" class="text-red-500" fill />
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## CLI Commands
|
|
57
|
+
|
|
58
|
+
Use the `labb icons` command to search and manage icons:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
# Search for icons
|
|
62
|
+
labb icons search "arrow"
|
|
63
|
+
|
|
64
|
+
# List available packs
|
|
65
|
+
labb icons packs
|
|
66
|
+
|
|
67
|
+
# Get detailed icon information
|
|
68
|
+
labb icons info rmx.arrow-down
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
For complete CLI documentation, see the <a href="{% doc_url '2_references/0_labb_cli.md' 'ui' %}#labb-icons">labb icons command reference</a>.
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Quick Start
|
|
3
|
+
description: Get started with labb Icons in minutes
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{% load docs_tags %}
|
|
7
|
+
|
|
8
|
+
## Basic Usage
|
|
9
|
+
|
|
10
|
+
After installing labb Icons, you can start using icons immediately. Icons can be referenced in two ways:
|
|
11
|
+
|
|
12
|
+
### 1. Direct Component Syntax
|
|
13
|
+
```html
|
|
14
|
+
<!-- Using the pattern <c-lbi.<pack>.<icon> /> -->
|
|
15
|
+
<c-lbi.rmx.heart w="24" h="24" class="text-red-500" />
|
|
16
|
+
<c-lbi.rmx.arrow-down-box w="24" h="24" />
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### 2. Name Attribute Syntax
|
|
20
|
+
```html
|
|
21
|
+
<!-- Using the n attribute -->
|
|
22
|
+
<c-lbi n="rmx.heart" w="24" h="24" class="text-red-500" />
|
|
23
|
+
<c-lbi n="rmx.arrow-down-box" w="24" h="24" />
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### 3. In Components (if supported)
|
|
28
|
+
Some labb components support an `icon` parameter:
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<!-- Badge with integrated icon -->
|
|
32
|
+
<c-lb.badge variant="info" icon="rmx.information">Info</c-lb.badge>
|
|
33
|
+
|
|
34
|
+
<!-- Button with icon -->
|
|
35
|
+
<c-lb.button variant="primary" icon="rmx.save">Save</c-lb.button>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Icon Packs
|
|
39
|
+
|
|
40
|
+
labb Icons supports multiple icon packs. Currently available:
|
|
41
|
+
|
|
42
|
+
- **Remix Icons (rmx)**: 1600+ icons across 19 categories
|
|
43
|
+
- More packs coming soon!
|
|
44
|
+
|
|
45
|
+
Use the CLI to explore available packs:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
# List all available packs
|
|
49
|
+
labb icons packs
|
|
50
|
+
|
|
51
|
+
# Search for icons across all packs
|
|
52
|
+
labb icons search "arrow"
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Icon Variants
|
|
56
|
+
|
|
57
|
+
Most icons come in two variants - line (outlined) and fill (solid):
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<!-- Line variant (default) -->
|
|
61
|
+
<c-lbi.rmx.camera w="24" h="24" class="text-blue-500" />
|
|
62
|
+
|
|
63
|
+
<!-- Fill variant -->
|
|
64
|
+
<c-lbi.rmx.camera w="24" h="24" class="text-blue-500" fill />
|
|
65
|
+
|
|
66
|
+
<!-- Line variant (explicit) -->
|
|
67
|
+
<c-lbi.rmx.camera w="24" h="24" class="text-blue-500" line />
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Customizing Icons
|
|
71
|
+
|
|
72
|
+
### Size
|
|
73
|
+
|
|
74
|
+
Control the size of your icons using the `w` (width) and `h` (height) attributes:
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<!-- Small icon -->
|
|
78
|
+
<c-lbi.rmx.heart w="16" h="16" class="text-red-500" />
|
|
79
|
+
|
|
80
|
+
<!-- Large icon -->
|
|
81
|
+
<c-lbi.rmx.heart w="32" h="32" class="text-red-500" />
|
|
82
|
+
|
|
83
|
+
<!-- Using em units -->
|
|
84
|
+
<c-lbi.rmx.heart w="1em" h="1em" class="text-red-500" />
|
|
85
|
+
|
|
86
|
+
<!-- Using pixel units -->
|
|
87
|
+
<c-lbi.rmx.heart w="2px" h="2px" class="text-red-500" />
|
|
88
|
+
|
|
89
|
+
<!-- Different width and height -->
|
|
90
|
+
<c-lbi.rmx.heart w="20" h="24" class="text-red-500" />
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Styling
|
|
94
|
+
|
|
95
|
+
Apply CSS classes to style your icons:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<!-- Basic styling -->
|
|
99
|
+
<c-lbi.rmx.heart w="24" h="24" class="text-red-500" />
|
|
100
|
+
|
|
101
|
+
<!-- With hover effects -->
|
|
102
|
+
<c-lbi.rmx.heart w="24" h="24" class="text-red-500 hover:text-red-700 transition-colors" />
|
|
103
|
+
|
|
104
|
+
<!-- With custom classes -->
|
|
105
|
+
<c-lbi.rmx.heart w="24" h="24" class="text-red-500 my-custom-icon-class" />
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
## CLI Commands
|
|
110
|
+
|
|
111
|
+
The `labbicons` CLI is available by default. When using `labb`, you can access it under `labb icons`:
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
# Using labbicons directly
|
|
115
|
+
labbicons search "arrow"
|
|
116
|
+
labbicons info rmx.arrow-down
|
|
117
|
+
labbicons packs
|
|
118
|
+
|
|
119
|
+
# Using through labb (if labb is installed)
|
|
120
|
+
labb icons search "arrow"
|
|
121
|
+
labb icons info rmx.arrow-down
|
|
122
|
+
labb icons packs
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
For complete CLI documentation, see the <a href="{% doc_url '2_references/0_labb_cli.md' 'ui' %}#labb-icons">labb icons command reference</a>.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
---
|
|
2
|
+
doc_layout: component
|
|
3
|
+
component: c-lbi.rmx
|
|
4
|
+
title: Remix
|
|
5
|
+
description: Open-source neutral-style system symbols elaborately crafted for designers and developers.
|
|
6
|
+
doc_show_toc: false
|
|
7
|
+
doc_links:
|
|
8
|
+
- url: https://remixicon.com/
|
|
9
|
+
type: external
|
|
10
|
+
icon: rmx.remixicon
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<c-lbdocs.icon_browser />
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
More packs coming soon!
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Introduction
|
|
3
|
+
description: Beautiful, accessible, and customizable UI components for your Django projects.
|
|
4
|
+
doc_show_toc: False
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<c-lbdocs.component_example path="introduction/welcome-card" style="stacked" />
|
|
8
|
+
|
|
9
|
+
The labb Component library provides a comprehensive set of reusable components that combine the power of [Django Cotton](https://django-cotton.com/) with the beautiful styling of [daisyUI 5](https://daisyui.com/docs/intro/). Whether you're building a simple form or a complex dashboard, these components will help you create consistent, professional interfaces quickly.
|
|
10
|
+
|
|
11
|
+
labb components allow you to write templates using familiar HTML tag structure. Instead of complex template tags or verbose syntax, you can use simple, intuitive component tags that look and feel like regular HTML elements. This makes your templates more readable and maintainable while providing powerful functionality under the hood.
|
|
12
|
+
|
|
13
|
+
All template tags are rendered on the backend, ensuring fast page loads and excellent SEO. Components work without JavaScript by default, making them accessible and performant out of the box.
|
|
14
|
+
|
|
15
|
+
## What is labb Component?
|
|
16
|
+
|
|
17
|
+
labb Component is a Django component library that provides beautiful, accessible, and customizable UI components. Built on top of Django Cotton and styled with Tailwind CSS and daisyUI 5, it offers a modern approach to building Django frontends.
|
|
18
|
+
|
|
19
|
+
## Key Features
|
|
20
|
+
|
|
21
|
+
- **Django Cotton Integration**: Components are built using Django Cotton for seamless template composition and reusability. Use familiar HTML tags and attributes to build your components.
|
|
22
|
+
- **daisyUI 5 Styling**: Beautiful, consistent styling powered by daisyUI 5 and Tailwind CSS.
|
|
23
|
+
- **No JavaScript by Default**: Components work without JavaScript, ensuring accessibility and performance.
|
|
24
|
+
- **Backend Rendered**: All template tags are rendered on the server for fast page loads and better SEO.
|
|
25
|
+
- **Customizable**: Easy theming and customization through Tailwind 4 CSS variables.
|
|
26
|
+
- **CLI Tool**: Built-in CLI for project setup, component inspection, and development workflows.
|
|
27
|
+
- **AI and LLM Friendly**: accessible documentation and code examples for AI and LLM use cases.
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Installation
|
|
3
|
+
description: How to install and set up labb in your Django project
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
## Prerequisites
|
|
7
|
+
|
|
8
|
+
Before installing labb, make sure you have:
|
|
9
|
+
|
|
10
|
+
- Django 4.2 or higher
|
|
11
|
+
- Python 3.8 or higher
|
|
12
|
+
|
|
13
|
+
## Install labb
|
|
14
|
+
|
|
15
|
+
### Using pip
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pip install labbui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Using Poetry
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
poetry add labbui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Add to Django Settings
|
|
28
|
+
|
|
29
|
+
Add `labb` to your `INSTALLED_APPS` in your Django settings:
|
|
30
|
+
|
|
31
|
+
### Automatic configuration:
|
|
32
|
+
|
|
33
|
+
<c-lbdocs.codeblock_title title="settings.py">
|
|
34
|
+
```python
|
|
35
|
+
INSTALLED_APPS = [
|
|
36
|
+
# ... other apps
|
|
37
|
+
'django_cotton',
|
|
38
|
+
'labb',
|
|
39
|
+
]
|
|
40
|
+
```
|
|
41
|
+
</c-lbdocs.codeblock_title>
|
|
42
|
+
|
|
43
|
+
This will attempt to automatically handle the settings.py by adding the required loader and templatetags.
|
|
44
|
+
|
|
45
|
+
### Custom configuration
|
|
46
|
+
|
|
47
|
+
If your project requires any non-default loaders or you do not wish Cotton to manage your settings, you should instead provide `django_cotton.apps.SimpleAppConfig` in your INSTALLED_APPS:
|
|
48
|
+
|
|
49
|
+
<c-lbdocs.codeblock_title title="settings.py">
|
|
50
|
+
```python
|
|
51
|
+
INSTALLED_APPS = [
|
|
52
|
+
# ... other apps
|
|
53
|
+
'django_cotton.apps.SimpleAppConfig',
|
|
54
|
+
'labb',
|
|
55
|
+
]
|
|
56
|
+
|
|
57
|
+
TEMPLATES = [
|
|
58
|
+
{
|
|
59
|
+
'BACKEND': 'django.template.backends.django.DjangoTemplates',
|
|
60
|
+
'DIRS': [BASE_DIR / 'templates'],
|
|
61
|
+
'APP_DIRS': False,
|
|
62
|
+
'OPTIONS': {
|
|
63
|
+
'context_processors': [
|
|
64
|
+
'django.template.context_processors.debug',
|
|
65
|
+
'django.template.context_processors.request',
|
|
66
|
+
'django.contrib.auth.context_processors.auth',
|
|
67
|
+
'django.contrib.messages.context_processors.messages',
|
|
68
|
+
],
|
|
69
|
+
'loaders': [
|
|
70
|
+
(
|
|
71
|
+
'django.template.loaders.cached.Loader',
|
|
72
|
+
[
|
|
73
|
+
'django_cotton.cotton_loader.Loader',
|
|
74
|
+
'django.template.loaders.filesystem.Loader',
|
|
75
|
+
'django.template.loaders.app_directories.Loader',
|
|
76
|
+
],
|
|
77
|
+
)
|
|
78
|
+
],
|
|
79
|
+
'builtins': [
|
|
80
|
+
'django_cotton.templatetags.cotton',
|
|
81
|
+
],
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
]
|
|
85
|
+
```
|
|
86
|
+
</c-lbdocs.codeblock_title>
|
|
87
|
+
|
|
88
|
+
## Initialize labb Project
|
|
89
|
+
|
|
90
|
+
After adding labb to your Django settings, you need to initialize and set up labb in your project:
|
|
91
|
+
|
|
92
|
+
### Step 1: Initialize Project
|
|
93
|
+
|
|
94
|
+
Initialize labb project with configuration and project structure:
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
labb init
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
For quick setup with defaults:
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
labb init --defaults
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
**Init Options:**
|
|
107
|
+
|
|
108
|
+
```bash
|
|
109
|
+
# Force overwrite existing files created by labb init
|
|
110
|
+
labb init --force
|
|
111
|
+
```
|
|
112
|
+
### Step 2: Install Dependencies
|
|
113
|
+
|
|
114
|
+
Install the required Node.js dependencies:
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
labb setup
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
**Setup Options:**
|
|
121
|
+
|
|
122
|
+
```bash
|
|
123
|
+
# Install dependencies automatically
|
|
124
|
+
labb setup --install-deps
|
|
125
|
+
|
|
126
|
+
# Skip dependency installation
|
|
127
|
+
labb setup --no-install-deps
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Basic Usage
|
|
131
|
+
|
|
132
|
+
Once installed and setup, you can start using components in your templates.
|
|
133
|
+
|
|
134
|
+
First, start the labb development watcher to monitor changes and build CSS:
|
|
135
|
+
|
|
136
|
+
```bash
|
|
137
|
+
labb dev
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
This will start both CSS building and template scanning in watch mode. Keep this running while you develop.
|
|
141
|
+
|
|
142
|
+
Next, in a **separate terminal**, start your Django development server:
|
|
143
|
+
|
|
144
|
+
```bash
|
|
145
|
+
python manage.py runserver
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
Now you can create templates with labb components:
|
|
149
|
+
|
|
150
|
+
<c-lbdocs.codeblock_title title="templates/example.html">
|
|
151
|
+
{% verbatim %}
|
|
152
|
+
```html
|
|
153
|
+
<!DOCTYPE html>
|
|
154
|
+
<html lang="en" {% labb_theme %}>
|
|
155
|
+
<head>
|
|
156
|
+
<meta charset="UTF-8">
|
|
157
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
158
|
+
<title>My labb App</title>
|
|
159
|
+
|
|
160
|
+
<c-lb.m.dependencies />
|
|
161
|
+
</head>
|
|
162
|
+
<body>
|
|
163
|
+
<!-- Basic button -->
|
|
164
|
+
<c-lb.button variant="primary">Click me</c-lb.button>
|
|
165
|
+
|
|
166
|
+
<!-- Card component -->
|
|
167
|
+
<c-lb.card>
|
|
168
|
+
<c-lb.card.body>
|
|
169
|
+
<c-lb.card.title>Card Title</c-lb.card.title>
|
|
170
|
+
<p>Card content goes here</p>
|
|
171
|
+
</c-lb.card.body>
|
|
172
|
+
</c-lb.card>
|
|
173
|
+
</body>
|
|
174
|
+
</html>
|
|
175
|
+
```
|
|
176
|
+
{% endverbatim %}
|
|
177
|
+
</c-lbdocs.codeblock_title>
|