Package: chope
ChopeCSS & HTML on Python Easily.Chope is a library that aims to provide a HTML and CSS domain-specific language (DSL) for Python.
It draws inspiration from Clojure'sHiccupand JavaScript'sEmotion.InstallChope can be installed through pip.pip install chopeSyntaxHere is a basic example of Chope syntax:fromchopeimport*fromchope.cssimport*page=html[head[style[Css['body':dict(background_color='linen',font_size=pt/12),'.inner-div':dict(color='maroon',margin_left=px/40)]]],body[h1['Title'],div(class_='outer-div')[div(class_='inner-div')['Some content.']]]]HTMLDeclaring an element is as simple as this:# <div>content</div>div['content']Element attributes can be specified like so:# <div id="my-id" class="my-class your-class">content</div>div(id='my-id',class_='my-class your-class')['content']Notice the_suffix in theclass_attribute. This suffix is necessary for any attribute names that clashes with any Python keyword.You can also defineidandclassusing CSS selector syntax:# <div id="my-id" class="my-class your-class" title="Title">content</div>div('#my-id.my-class.your-class',title='Title')['content']Iterables can be used to generate a sequence of elements in the body of an element.# <ul><li>0</li><li>1</li><li>2</li></ul>ul[(li[str(i)]foriinrange(3))]Creating custom elementsIf you want to create a custom element with a custom tag, simply inherit from theElementclass.fromchopeimportElementclasscustom(Element):## class name will be used as tag name during renderingpasscustom['some content.']## <custom>some content.</custom>Normally, you don't need to override any method ofElement, but if you want to change how your element is rendered, you can override therender()method.CSSThe CSS syntax in Chope is simply a mapping between CSS selector strings and declarations dictionaries.Here's how a simple CSS stylesheet looks like in Chope:'''h1 {color: blue;}.my-class {background-color: linen;text-align: center;}'''Css['h1':dict(color='blue'),'.my-class':dict(background_color='linen',text_align='center')]# ORCss['h1':{'color':'blue'},'.my-class':{'background-color':'linen','text-align':'center'}]When you do declarations using thedictconstructor, any_will be converted to-automatically.If your attribute name actually contains an_, declare using dictionary literal instead.UnitsDeclaring size properties is very simple:'''.my-class {font-size: 14px;margin: 20%;}'''Css['.my-class':dict(font_size=px/14,margin=percent/20)]Chope supports standard HTML units. (e.g.em,rem,pt, etc.)To set properties with multiple values, simply pass an iterable or a string.'''.my-class {padding: 58px 0 0;}'''Css['.my-class':dict(padding=(px/58,0,0))]# ORCss['.my-class':dict(padding='58px 0 0')]RenderOnce you are done defining your CSS and HTML, you can render them into string using therender()method.>>>page=html[head[style[Css['.item':dict(font_size=px/14)]]],body[div('#my-item.item')['My content.']]]>>>print(page.render())'<html><head><style>.item{font-size:14px;}</style></head><body><divid="my-item"class="item">Mycontent.</div></body></html>'By default,render()will add indentations with 2 spaces. You can modify this using theindentkeyword argument.>>>print(page.render(indent=4))'<html><head><style>.item{font-size:14px;}</style></head><body><divid="my-item"class="item">Mycontent.</div></body></html>'>>>print(page.render(indent=0))## render flat string'<html><head><style>.item {font-size: 14px;}</style></head><body><div id="my-item" class="item">My content.</div></body></html>'CSS objects can also be rendered the same way.>>>css=Css['h1':dict(font_size=px/14),'.my-class':dict(color='blue',padding=(0,0,px/20))]>>>print(css.render())'h1 {font-size:14px;}.my-class{color:blue;padding:0020px;}'