Skip to content

Commit 7db7310

Browse files
eadwinCodeeadwinCode
authored
Update README.md
1 parent a9d5f0a commit 7db7310

File tree

1 file changed

+188
-2
lines changed

1 file changed

+188
-2
lines changed

‎README.md‎

Lines changed: 188 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,188 @@
1-
# py-html
2-
Building Static HTML and CSS in python
1+
# py-HTML
2+
Building Static HTML and CSS in Python
3+
4+
## Introduction
5+
PyHTML is a library that compiles HTML syntax based on how py-HTML elements are combined. The compiled HTML is still static not JS interactions or Virtual DOM thingy.
6+
It simply provides components that make it easier to build the HTML template faster. Although there are Jinja and Mako in this space, I don't intend to make this library a substitute for such a package.
7+
**This is just an experiment. **
8+
9+
## Quick Bootstrap Example
10+
```python
11+
from py_html.contrib.bootstrap.main import BootstrapHTML
12+
from py_html.el.base import render_component
13+
from starlette.responses import HTMLResponse
14+
15+
from ellar.common.responses.models import HTMLResponseModel
16+
17+
from ellar.common import ModuleRouter
18+
19+
from ellar.app import AppFactory
20+
from ellar_cli.main import create_ellar_cli
21+
22+
from py_html.contrib.bootstrap.icon import BIcon
23+
24+
from py_html.contrib.bootstrap.avatar import BAvatar, BAvatarGroup
25+
26+
from py_html.contrib.bootstrap.layout_grid_system import BContainer, BRow, BCol
27+
28+
from py_html.styles import StyleCSS
29+
import py_html.el as el
30+
31+
router = ModuleRouter("/example")
32+
33+
34+
@router.get("/", response=HTMLResponse)
35+
def template():
36+
content = BootstrapHTML(
37+
content=[
38+
el.Body(
39+
content=lambda ctx: el.Fragment(
40+
"""
41+
<div class="container-fluid">
42+
<h1>My First Bootstrap Page</h1>
43+
<p>This is some text.</p>
44+
</div>
45+
""",
46+
BContainer(
47+
fluid=True,
48+
content=(
49+
el.H1(content="My First Bootstrap Page"),
50+
el.P(content="This is some text."),
51+
)
52+
),
53+
BContainer(
54+
class_name="p-5 my-5 border",
55+
content=(
56+
el.H1(content="My First Bootstrap Page"),
57+
el.P(content="This is some text."),
58+
)
59+
),
60+
BContainer(
61+
class_name="p-5 my-5 bg-dark text-white",
62+
content=(
63+
el.H1(content="My First Bootstrap Page"),
64+
el.P(content="This is some text."),
65+
)
66+
),
67+
BContainer(
68+
class_name="p-5 my-5 bg-primary text-white",
69+
content=(
70+
el.H1(content="My First Bootstrap Page"),
71+
el.P(content="This is some text.")
72+
)
73+
),
74+
BContainer(
75+
class_name=f"p-5 my-5 border",
76+
content=(
77+
el.H1(content="Avatars Examples"),
78+
el.Div(class_name="mt-2", content=(
79+
BAvatar(text="Foo", class_name="mx-2", size="72px"),
80+
BAvatar(icon="people-fill", class_name="mx-2", size="72px"),
81+
BAvatar(
82+
icon="people-fill",
83+
class_name="mx-2",
84+
size="45px",
85+
badge='100',
86+
variant="primary",
87+
badge_variant="dark"
88+
),
89+
BAvatar(
90+
icon="people-fill",
91+
class_name="mx-2",
92+
size="45px",
93+
badge=BIcon(icon_name="exclamation-circle-fill", variant="warning"),
94+
variant="danger",
95+
badge_variant="danger",
96+
badge_position="bottom-left"
97+
),
98+
)),
99+
el.Hr(),
100+
el.H1(content="Avatars Group Examples"),
101+
el.Div(class_name="mt-2", content=(
102+
BAvatarGroup(
103+
size=f"{i + 1 * 2}rem",
104+
over_lap=0.2,
105+
content=(
106+
BAvatar(text="Foo", size="72px"),
107+
BAvatar(icon="people-fill", size="72px"),
108+
BAvatar(
109+
icon="people-fill",
110+
size="45px",
111+
badge='100',
112+
variant="primary",
113+
badge_variant="dark"
114+
),
115+
BAvatar(
116+
icon="people-fill",
117+
size="45px",
118+
badge=BIcon(icon_name="exclamation-circle-fill", variant="warning"),
119+
variant="danger",
120+
badge_variant="danger",
121+
badge_position="bottom-right"
122+
),
123+
)
124+
)
125+
for i in range(5)
126+
)),
127+
128+
)
129+
),
130+
BContainer(
131+
class_name="p-5 my-5 border",
132+
content=el.Div(
133+
class_name="h2 mb-0",
134+
content=(
135+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="success"),
136+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="warning"),
137+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="info"),
138+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="danger"),
139+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="primary"),
140+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="secondary"),
141+
BIcon(icon_name="exclamation-circle", class_name="mx-1 bg-info", variant="dark", ),
142+
BIcon(icon_name="bell-fill", class_name="border rounded p-2 mx-1", variant="dark"),
143+
)
144+
)
145+
),
146+
BContainer(
147+
class_name="p-5 my-5 bg-primary text-white",
148+
content=el.Fragment(
149+
BRow(
150+
class_name="justify-content-md-center",
151+
content=[
152+
BCol(col=True, lg=2, content="1 of 3", style=StyleCSS(background_color="red")),
153+
BCol(cols="12", md="auto", content="Variable width content",
154+
style=StyleCSS(background_color="yellow")),
155+
BCol(col=True, lg=2, content="Variable width content",
156+
style=StyleCSS(background_color="pink")),
157+
]
158+
),
159+
BRow(
160+
content=[
161+
BCol(content="1 of 3", style=StyleCSS(background_color="orange")),
162+
BCol(cols="12", md="auto", content="Variable width content",
163+
style=StyleCSS(background_color="gray")),
164+
BCol(col=True, lg=2, content="Variable width content",
165+
style=StyleCSS(background_color="smoke")),
166+
]
167+
)
168+
)
169+
),
170+
)
171+
)
172+
]
173+
)
174+
175+
return render_component(content, {})
176+
177+
178+
def bootstrap():
179+
application = AppFactory.create_app(routers=[router])
180+
return application
181+
182+
183+
cli = create_ellar_cli("bootstrap_exercise:bootstrap")
184+
185+
if __name__ == "__main__":
186+
cli()
187+
```
188+

0 commit comments

Comments
 (0)