| Name | pydzn JSON |
| Version |
0.1.6
JSON |
| download |
| home_page | None |
| Summary | Build complex websites in pure python with pydzn layout builder, semantic css classes and an extendable components library for server-side rendering. |
| upload_time | 2025-09-16 16:29:58 |
| maintainer | None |
| docs_url | None |
| author | None |
| requires_python | >=3.10 |
| license | Apache-2.0 |
| keywords |
design-system
css
utility-classes
jinja2
components
grid
htmx
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# pydzn
*Pronounced:* **[paɪ dɪˈzaɪn]** — “**pie design**” (aka **py-design**)
Design and develop complex websites all in python. Build web components, rendered on the server-side and served up in any python backend web server (flask, django...).
More than just a view layer, pydzn serves as a framework that introduces python developers to front end development with an intuitive approach for layout design, component development and styling.
## Who is pydzn for
- Python fluent programmers who find designing and developing nice looking websites a frustrating task
- Students learning python who also want to learn how to build websites
- Backend developers and data scientists who want to build AI-embedded web applications
- Front-end developers who value simplicity while maintaining full control over their runtime
- Professional front-end developers who want to avoid react abstraction bloat and javascript's async chaos
## Why pydzn
Creating and serving a webpage is technically easy for most developers. Designing and developing a nice looking website is much more difficult. pydzn offers a framework for breaking up the task of front-end design and development, logically, into layout creation, component creation with the injection of those components into that layout. Where a layout is a grid in a 2-dimensional space containing named regions of which you style and inject components into. A layout is a class which can have an arbitrary number of regions. A region is a placement in a grid layout for which another layout OR component can be injected.
## Introduction
### Layouts
A website is a design in a 2-dimensional space, therefore, a design divides that 2-dimensional space into regions. We've made this easy to do in pydzn with the `layout_builder`. With a little practice you'll start seeing other websites as "grid layouts" and you'll find it easy to recreate them in pydzn. Let's start by creating a generic page layout.
```python
@app.route("/tutorial")
def tutorial():
from pydzn.grid_builder import layout_builder
APPBAR_HEIGHT=100
HERO_HEIGHT=200
BODY_HEIGHT=400
FOOTER_HEIGHT=200
DEBUG=True
GenericPageLayout = (
layout_builder()
.fill_height("100%", property="height")
.columns(c0="1fr") # for the base layout we only need one column because each row will be it's own region
.rows(r0=APPBAR_HEIGHT, r1=HERO_HEIGHT, r2=BODY_HEIGHT, r3=FOOTER_HEIGHT) # each row is a section of the web page in this case
.region("appbar", row="r0", col="c0") # the appbar belongs in row 0 and column 0
.region("hero", row="r1", col="c0")
.region("body", row="r2", col="c0")
.region("footer", row="r3", col="c0")
.build(name="GenericPageLayout")
)
body = GenericPageLayout(debug=DEBUG).render() # set debug=True in order view the layout lines and region names for easier development
return render_template("index.html", body=body)
```
<p align="center">
<img src="docs/simple_website_layout_start.png" alt="mobile" width="640">
</p>
The layout we've created is a common layout containing an appbar, hero, body and footer. Let's now inject the appbar layout into the appbar region.
```python
...
AppBarLayout = (
layout_builder()
.fill_height("100%", property="height")
.columns(c0="1fr", c1="3fr", c2="1fr", c3="1fr", c4="1fr") # we'll divide the app bar into 5 columns and we'll make c1 a spacer
.rows(r0=APPBAR_HEIGHT) # we've previously set the appbar height so we'll use it
.region("brand", row="r0", col="c0")
.region("spacer0", row="r0", col="c1")
.region("about", row="r0", col="c2")
.region("contact", row="r0", col="c3")
.region("services", row="r0", col="c4")
.build(name="AppBarLayout")
)
body = GenericPageLayout(debug=DEBUG).render(
appbar=AppBarLayout(debug=DEBUG).render() # appbar, like hero, body and footer are variables in the render function's signature
)
return render_template("index.html", body=body)
```
<p align="center">
<img src="docs/simple_website_layout_appbar.png" alt="mobile" width="640">
</p>
Next let's add some of pydzn pre-made components into the appbar.
```python
...
from pydzn.components import Text, NavItem
body = GenericPageLayout(debug=DEBUG).render(
appbar=AppBarLayout(debug=DEBUG).render(
brand=Text(
text="Acme Widgets",
dzn="text-[#272727]").render(), # let's give the text a color using pydzn semantic classes
about=NavItem(
children=Text(
text="About Us", dzn="text-[#272727]").render()
).no_underline().center().as_link("/#").render(),
contact=NavItem(
children=Text(text="Contact Us", dzn="text-[#272727]").render()
).no_underline().center().as_link("/#").render(),
services=NavItem(
children=Text(text="Services", dzn="text-[#272727]").render()
).no_underline().center().as_link("/#").render()
)
)
return render_template("index.html", body=body)
```
<p align="center">
<img src="docs/simple_website_layout_appbar_components.png" alt="mobile" width="640">
</p>
We inject complex components (NavItem composed of Text) into the region slots inside `AppBarLayout`, however, I don't like how they look inside their respective regions. pydzn provides a dzn controls on layouts in order to define the layout within each region. Let's center each of these components in their respective region.
```python
...
from pydzn.components import Text, NavItem
body = GenericPageLayout(
debug=DEBUG,).render(
appbar=AppBarLayout(
debug=DEBUG,
region_dzn={
"brand": "flex items-center justify-center", # pydzn provides fine control on individual region styles using the dzn semantic classes
"about": "flex items-center justify-center",
"contact": "flex items-center justify-center",
"services": "flex items-center justify-center"
}).render(
brand=Text(text="Acme Widgets", dzn="text-[#272727]").render(), # let's give the text a color using pydzn semantic classes
about=NavItem(
children=Text(
text="About Us", dzn="text-[#272727]").render()).no_underline().center().as_link("/#").render(),
contact=NavItem(
children=Text(
text="Contact Us", dzn="text-[#272727]").render()).no_underline().center().as_link("/#").render(),
services=NavItem(
children=Text(text="Services", dzn="text-[#272727]").render()).no_underline().center().as_link("/#").render()
)
)
return render_template("index.html", body=body)
```
<p align="center">
<img src="docs/simple_website_layout_appbar_components_centered.png" alt="mobile" width="640">
</p>
Pydzn offers utilities for serving responsive websites and leverages htmx to provide complex functionality within your web pages. To be continued...
## Examples
- For examples see: [pydzn-website](https://github.com/anthonyrka/pydzn-website)
## References
- See [PyPI](https://pypi.org/project/pydzn/)
Raw data
{
"_id": null,
"home_page": null,
"name": "pydzn",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "design-system, css, utility-classes, jinja2, components, grid, htmx",
"author": null,
"author_email": "Ryan Kirkish <ryan@foo.com>",
"download_url": "https://files.pythonhosted.org/packages/d4/f9/156174622e2f90c1d36f72feed2a807716f13423d3a38e0bfe0906afb4c0/pydzn-0.1.6.tar.gz",
"platform": null,
"description": "# pydzn\n*Pronounced:* **[pa\u026a d\u026a\u02c8za\u026an]** \u2014 \u201c**pie design**\u201d (aka **py-design**)\n\nDesign and develop complex websites all in python. Build web components, rendered on the server-side and served up in any python backend web server (flask, django...).\n\nMore than just a view layer, pydzn serves as a framework that introduces python developers to front end development with an intuitive approach for layout design, component development and styling.\n\n## Who is pydzn for\n- Python fluent programmers who find designing and developing nice looking websites a frustrating task\n- Students learning python who also want to learn how to build websites\n- Backend developers and data scientists who want to build AI-embedded web applications\n- Front-end developers who value simplicity while maintaining full control over their runtime\n- Professional front-end developers who want to avoid react abstraction bloat and javascript's async chaos\n\n## Why pydzn\nCreating and serving a webpage is technically easy for most developers. Designing and developing a nice looking website is much more difficult. pydzn offers a framework for breaking up the task of front-end design and development, logically, into layout creation, component creation with the injection of those components into that layout. Where a layout is a grid in a 2-dimensional space containing named regions of which you style and inject components into. A layout is a class which can have an arbitrary number of regions. A region is a placement in a grid layout for which another layout OR component can be injected.\n\n## Introduction\n\n### Layouts\nA website is a design in a 2-dimensional space, therefore, a design divides that 2-dimensional space into regions. We've made this easy to do in pydzn with the `layout_builder`. With a little practice you'll start seeing other websites as \"grid layouts\" and you'll find it easy to recreate them in pydzn. Let's start by creating a generic page layout.\n\n```python\n@app.route(\"/tutorial\")\ndef tutorial():\n from pydzn.grid_builder import layout_builder\n\n APPBAR_HEIGHT=100\n HERO_HEIGHT=200\n BODY_HEIGHT=400\n FOOTER_HEIGHT=200\n DEBUG=True\n\n GenericPageLayout = (\n layout_builder()\n .fill_height(\"100%\", property=\"height\")\n .columns(c0=\"1fr\") # for the base layout we only need one column because each row will be it's own region\n .rows(r0=APPBAR_HEIGHT, r1=HERO_HEIGHT, r2=BODY_HEIGHT, r3=FOOTER_HEIGHT) # each row is a section of the web page in this case\n .region(\"appbar\", row=\"r0\", col=\"c0\") # the appbar belongs in row 0 and column 0\n .region(\"hero\", row=\"r1\", col=\"c0\")\n .region(\"body\", row=\"r2\", col=\"c0\")\n .region(\"footer\", row=\"r3\", col=\"c0\")\n .build(name=\"GenericPageLayout\")\n )\n\n body = GenericPageLayout(debug=DEBUG).render() # set debug=True in order view the layout lines and region names for easier development\n return render_template(\"index.html\", body=body)\n```\n\n<p align=\"center\">\n <img src=\"docs/simple_website_layout_start.png\" alt=\"mobile\" width=\"640\">\n</p>\n\nThe layout we've created is a common layout containing an appbar, hero, body and footer. Let's now inject the appbar layout into the appbar region.\n\n```python\n...\n AppBarLayout = (\n layout_builder()\n .fill_height(\"100%\", property=\"height\")\n .columns(c0=\"1fr\", c1=\"3fr\", c2=\"1fr\", c3=\"1fr\", c4=\"1fr\") # we'll divide the app bar into 5 columns and we'll make c1 a spacer\n .rows(r0=APPBAR_HEIGHT) # we've previously set the appbar height so we'll use it\n .region(\"brand\", row=\"r0\", col=\"c0\")\n .region(\"spacer0\", row=\"r0\", col=\"c1\")\n .region(\"about\", row=\"r0\", col=\"c2\")\n .region(\"contact\", row=\"r0\", col=\"c3\")\n .region(\"services\", row=\"r0\", col=\"c4\")\n .build(name=\"AppBarLayout\")\n )\n\n body = GenericPageLayout(debug=DEBUG).render(\n appbar=AppBarLayout(debug=DEBUG).render() # appbar, like hero, body and footer are variables in the render function's signature\n )\n return render_template(\"index.html\", body=body)\n```\n\n<p align=\"center\">\n <img src=\"docs/simple_website_layout_appbar.png\" alt=\"mobile\" width=\"640\">\n</p>\n\nNext let's add some of pydzn pre-made components into the appbar.\n\n```python\n...\n from pydzn.components import Text, NavItem\n\n body = GenericPageLayout(debug=DEBUG).render(\n appbar=AppBarLayout(debug=DEBUG).render(\n brand=Text(\n text=\"Acme Widgets\", \n dzn=\"text-[#272727]\").render(), # let's give the text a color using pydzn semantic classes\n about=NavItem(\n children=Text(\n text=\"About Us\", dzn=\"text-[#272727]\").render()\n ).no_underline().center().as_link(\"/#\").render(),\n contact=NavItem(\n children=Text(text=\"Contact Us\", dzn=\"text-[#272727]\").render()\n ).no_underline().center().as_link(\"/#\").render(),\n services=NavItem(\n children=Text(text=\"Services\", dzn=\"text-[#272727]\").render()\n ).no_underline().center().as_link(\"/#\").render()\n )\n )\n return render_template(\"index.html\", body=body)\n```\n<p align=\"center\">\n <img src=\"docs/simple_website_layout_appbar_components.png\" alt=\"mobile\" width=\"640\">\n</p>\n\nWe inject complex components (NavItem composed of Text) into the region slots inside `AppBarLayout`, however, I don't like how they look inside their respective regions. pydzn provides a dzn controls on layouts in order to define the layout within each region. Let's center each of these components in their respective region.\n\n```python\n...\n from pydzn.components import Text, NavItem\n\n body = GenericPageLayout(\n debug=DEBUG,).render(\n appbar=AppBarLayout(\n debug=DEBUG,\n region_dzn={\n \"brand\": \"flex items-center justify-center\", # pydzn provides fine control on individual region styles using the dzn semantic classes\n \"about\": \"flex items-center justify-center\",\n \"contact\": \"flex items-center justify-center\",\n \"services\": \"flex items-center justify-center\"\n }).render(\n brand=Text(text=\"Acme Widgets\", dzn=\"text-[#272727]\").render(), # let's give the text a color using pydzn semantic classes\n about=NavItem(\n children=Text(\n text=\"About Us\", dzn=\"text-[#272727]\").render()).no_underline().center().as_link(\"/#\").render(),\n contact=NavItem(\n children=Text(\n text=\"Contact Us\", dzn=\"text-[#272727]\").render()).no_underline().center().as_link(\"/#\").render(),\n services=NavItem(\n children=Text(text=\"Services\", dzn=\"text-[#272727]\").render()).no_underline().center().as_link(\"/#\").render()\n )\n )\n return render_template(\"index.html\", body=body)\n```\n\n<p align=\"center\">\n <img src=\"docs/simple_website_layout_appbar_components_centered.png\" alt=\"mobile\" width=\"640\">\n</p>\n\nPydzn offers utilities for serving responsive websites and leverages htmx to provide complex functionality within your web pages. To be continued...\n\n## Examples\n- For examples see: [pydzn-website](https://github.com/anthonyrka/pydzn-website)\n\n## References\n- See [PyPI](https://pypi.org/project/pydzn/)\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Build complex websites in pure python with pydzn layout builder, semantic css classes and an extendable components library for server-side rendering.",
"version": "0.1.6",
"project_urls": {
"Homepage": "https://github.com/anthonyrka/pydzn",
"Issues": "https://github.com/anthonyrka/pydzn/issues",
"Repository": "https://github.com/anthonyrka/pydzn"
},
"split_keywords": [
"design-system",
" css",
" utility-classes",
" jinja2",
" components",
" grid",
" htmx"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "98ffd8e549bcc9c757eb7e8851e0a778727e3b6bec7af7e42ca058dc7fe5d405",
"md5": "e05ad1bc76019a0db2fe683de8319874",
"sha256": "d8e92cf638c506cf11ccb5c12b289f5a7a9ad786b87e484f0b47af33fa49195e"
},
"downloads": -1,
"filename": "pydzn-0.1.6-py3-none-any.whl",
"has_sig": false,
"md5_digest": "e05ad1bc76019a0db2fe683de8319874",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 48671,
"upload_time": "2025-09-16T16:29:57",
"upload_time_iso_8601": "2025-09-16T16:29:57.574813Z",
"url": "https://files.pythonhosted.org/packages/98/ff/d8e549bcc9c757eb7e8851e0a778727e3b6bec7af7e42ca058dc7fe5d405/pydzn-0.1.6-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "d4f9156174622e2f90c1d36f72feed2a807716f13423d3a38e0bfe0906afb4c0",
"md5": "da5a2ab42324e19cb791b66014d1fc6f",
"sha256": "982814cd3b522e51dd8f24d592dfb148f233dda1cfb7ee09f39a7d17cff3741a"
},
"downloads": -1,
"filename": "pydzn-0.1.6.tar.gz",
"has_sig": false,
"md5_digest": "da5a2ab42324e19cb791b66014d1fc6f",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 42987,
"upload_time": "2025-09-16T16:29:58",
"upload_time_iso_8601": "2025-09-16T16:29:58.844359Z",
"url": "https://files.pythonhosted.org/packages/d4/f9/156174622e2f90c1d36f72feed2a807716f13423d3a38e0bfe0906afb4c0/pydzn-0.1.6.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-09-16 16:29:58",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "anthonyrka",
"github_project": "pydzn",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "pydzn"
}
