Build reusable styled HTML components with python.
Project description
Bricka
Build reusable styled HTML components with python.
Installation
pip install bricka
Usage
Creating a basic HTML document.
from bricka.elements import *
with Html(lang="en") as doc:
with Head():
Meta(charset="UTF-8")
Meta(name="viewport", content="width=device-width, initial-scale=1.0")
Link(rel="stylesheet", href=f"style.css")
Title("Document", class_="title")
with Body():
P("My first document with Bricka")
print(doc.render())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title class="title">Document</title>
</head>
<body>
<p>My first document with Bricka</p>
</body>
</html>
Creating a styled table
from bricka.elements import *
headers = ["Fruit", "Color"]
fruits = [
["Banana", "Yellow"],
["Orange", "Orange"],
["Apricot", "Orange"],
["Apple", "Green"],
["Lemon", "Yellow"]
]
style: Style = {
"table": {
"border": ("1px", "solid", "black"),
"border-collapse": "collapse",
},
"th": {
"font-weight": "600",
"background-color": "aqua",
},
"td": {
"border": ("1px", "solid", "black"),
"padding-x": "0.75rem",
},
"tr": {
":hover": {
"background-color": "fuchsia"
}
},
}
with Table(css=style["table"]) as table:
with Thead():
with Tr():
Th("#", css=[style["th"], style["td"]])
for header in headers:
Th(header, css=[style["th"], style["td"]])
with Tbody():
for i, fruit in enumerate(fruits):
with Tr(css=style["tr"]):
Td(i+1, css=style["td"])
Td(fruit[0], css=style["td"])
Td(fruit[1], css=style["td"])
print(table.render())
print(table.render_css())
Generated HTML.
<table class="fe6697e7 ff18cedd ">
<thead>
<tr>
<th class="f1acb709 f10a659d fe6697e7 fa3a81d2 fd93d40d ">#</th>
<th class="f1acb709 f10a659d fe6697e7 fa3a81d2 fd93d40d ">Fruit</th>
<th class="f1acb709 f10a659d fe6697e7 fa3a81d2 fd93d40d ">Color</th>
</tr>
</thead>
<tbody>
<tr class="feec5036 ">
<td class="fe6697e7 fa3a81d2 fd93d40d ">1</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Banana</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Yellow</td>
</tr>
<tr class="feec5036 ">
<td class="fe6697e7 fa3a81d2 fd93d40d ">2</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Orange</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Orange</td>
</tr>
<tr class="feec5036 ">
<td class="fe6697e7 fa3a81d2 fd93d40d ">3</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Apricot</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Orange</td>
</tr>
<tr class="feec5036 ">
<td class="fe6697e7 fa3a81d2 fd93d40d ">4</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Apple</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Green</td>
</tr>
<tr class="feec5036 ">
<td class="fe6697e7 fa3a81d2 fd93d40d ">5</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Lemon</td>
<td class="fe6697e7 fa3a81d2 fd93d40d ">Yellow</td>
</tr>
</tbody>
</table>
Generated CSS.
.fe6697e7 { border: 1px solid black; }
.ff18cedd { border-collapse: collapse; }
.f1acb709 { font-weight: 600; }
.f10a659d { background-color: aqua; }
.fa3a81d2 { padding-left: 0.75rem; }
.fd93d40d { padding-right: 0.75rem; }
.feec5036:hover { background-color: fuchsia; }
Features
Below are the main features of Bricka:
- Create complex element hierarchies using context managers
- Append elements with the right and left shift operators
- Create element siblings with the plus operator
- Context-aware escaping
- Support for standard HTML elements
- Support for standard HTML attributes
- Code autocompletion for HTML attributes
- Components styling with pure python
- Create styles using ready CSS constraints
- Atomic CSS generation
- Code autocompletion for CSS properties and constraints
- Comprehensive unit tests
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
bricka-0.3.0.tar.gz
(33.7 kB
view details)
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
bricka-0.3.0-py3-none-any.whl
(33.6 kB
view details)
File details
Details for the file bricka-0.3.0.tar.gz.
File metadata
- Download URL: bricka-0.3.0.tar.gz
- Upload date:
- Size: 33.7 kB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/5.0.0 CPython/3.12.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
d79b8c823c21813ccaf2e289588d5c41073302bd532b535fb93f7e1061330a60
|
|
| MD5 |
82b7bc8150b69f9a6e5ddba4500eee45
|
|
| BLAKE2b-256 |
0984e77dd42e5a666ef4ae16c5de6763af80ebc65944b91e00e6515810c3b5a4
|
File details
Details for the file bricka-0.3.0-py3-none-any.whl.
File metadata
- Download URL: bricka-0.3.0-py3-none-any.whl
- Upload date:
- Size: 33.6 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/5.0.0 CPython/3.12.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
026141b2e4fa7cfd304017127a175e982530bb504ab755ecbca2c8c437237df0
|
|
| MD5 |
4d7f36f2f8189052dfa7759e03e14945
|
|
| BLAKE2b-256 |
80308d39fa1a483e3c36f6aebe90f4edbe294e76c51b850c3d45fe927cb2d50c
|
