Write you frontend using YAML
Project description
HellTML
Ever wondered how to transform your frontend development into a never-ending nightmare?
Introducing my brainchild: "HellTML"! It's a frontend framework that gleefully crams all your HTML and CSS into a YAML file, where indentation errors and misplaced colons reign supreme. Forget about the joys of live reloading or intuitive debugging— with "HellTML", you'll be diving headfirst into a labyrinth of indents gone wild and inexplicable syntax errors. Embrace the chaos and discover a whole new level of frontend development frustration!
How to use
first you will need to install HellTML:
> pip install helltml
the only command you will need is build:
> python -m helltml build --filename=your_yaml_file.yml
YAML file format:
HTML
Each key under the html key represents either an attribute or an element within an HTML document.
for example:
pages:
example_1:
html:
head:
children:
title:
children_text: "example"
body:
children:
div:
class: "example_class"
Explanation:
-
Keys such as
head,body,div, andtitlecorrespond to specific HTML tags. -
The
childrenkey signifies the nested elements or content within each HTML tag. -
The
children_textkey is used to specify plain text content within an element. -
Attributes like
classdenote standard attributes that can be applied to html tags.
and after building we should get the following html file:
<html>
<head>
<title>example</title>
</head>
<body>
<div class="example_class"></div>
</body>
</html>
CSS
Each key under the css key represents a class and its attributes
for example:
pages:
your_page_1:
html:
...
css:
"*":
margin: 0
body:
display: flex
"@media (max-width: 900px)" :
children:
section span:
width: "calc(10vw - 2px)"
height: "calc(10vw - 2px)"
Explanation:
-
Keys such as
"*","@media (max-width: 900px)",section span, andbodyrepresent class selectors in a CSS file. -
The
childrenkey indicates nested classes or elements within the respective CSS selectors. -
any other attributes like
margin, anddisplaycorrespond to standard css properties.
Example
open the examples/login page folder
run the following command:
> python -m helltml convert --filename="login_page.yml"
now you should see a new directory outdir/login_page with a files inside named login_page.css and login_page.html
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
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
File details
Details for the file helltml-0.0.1.tar.gz.
File metadata
- Download URL: helltml-0.0.1.tar.gz
- Upload date:
- Size: 4.6 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/5.1.1 CPython/3.12.4
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
8c4e84f673371ca7e1f2e930b352062e4a19774369f899d06ea640620fa26836
|
|
| MD5 |
1b60e9e05e28bb49d2bf04d39ae70d5b
|
|
| BLAKE2b-256 |
2383e41da5d8c8de174aad16ad47e0ca666db794cd60be60073c62a6a12e5143
|
File details
Details for the file helltml-0.0.1-py3-none-any.whl.
File metadata
- Download URL: helltml-0.0.1-py3-none-any.whl
- Upload date:
- Size: 5.2 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/5.1.1 CPython/3.12.4
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
a8b870af22887b7a04a38819b3efcefc58bd3412a38d66d982ecf06f8d4b6528
|
|
| MD5 |
3d707e35dcce7ce7624653e010e8a2d3
|
|
| BLAKE2b-256 |
3e1277c9a47531ce6863f88dcb8ca2da6d2a5876855d27845cac8a01f8b79f50
|
