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!
first you will need to install HellTML:
> pip install helltml
and the only command you will need is:
> python -m helltml --filename=your_yaml_file.yml
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>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.
open the examples/login page folder
run the following command:
> python -m helltml --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