Skip to content

Instantly share code, notes, and snippets.

@anandology
Created January 5, 2023 06:50
Show Gist options
  • Save anandology/33f3fb1496ea675c9a83dc2436bccb12 to your computer and use it in GitHub Desktop.
Save anandology/33f3fb1496ea675c9a83dc2436bccb12 to your computer and use it in GitHub Desktop.
bootstrap.py
from kutty import Page, Table, Code, html
from _demo import Demo
page = Page("Bootstrap")
page << html.p("""
bootstrap experiments.
""")
code = """
from kutty.html import HTML
html = '''
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
'''
"""
page << Demo(code, "html")
code = """
from kutty import html as h
g = h.div(class_="list-group")
g << h.div(
class_="list-group-item active",
_content="An active item")
g << h.div(
class_="list-group-item",
_content="An second item")
g << h.div(
class_="list-group-item",
_content="An third item")
"""
page << Demo(code, "g")
code = """
from kutty import html as h
def ListGroup():
return h.div(class_="list-group")
def ListGroupItem(content, active=False):
classes = ["list-group-item"]
if active: classes.append("active")
return h.div(
class_=" ".join(classes),
_content=content)
g = ListGroup()
g << ListGroupItem("An active Item", active=True)
g << ListGroupItem("A second item")
g << ListGroupItem("A third item")
"""
page << Demo(code, "g")
page << html.h2("Links")
code = """
from kutty import html as h
from kutty import Link
def is_link(item):
return item.TAG == "a" or item.TAG == "button"
def ListGroup(items=[]):
g = h.div(class_="list-group")
for item in items:
if is_link(item):
item.attrs["class_"] = item.attrs.get("class_", "") + " list-group-item list-group-item-action"
else:
item = ListGroupItem(item)
g << item
return g
def ListGroupItem(content, active=False):
classes = ["list-group-item"]
if active: classes.append("active")
return h.div(
class_=" ".join(classes),
_content=content)
g = ListGroup()
g << ListGroupItem("An active Item", active=True)
g << Link("Home", href="/", class_="list-group-item list-group-item-action")
g << ListGroupItem(Link("Link", href="/components/links"))
items = {"Home": "/", "Link": "/components/link"}
# ListGroup([Link(title, href=href)
# for title, href in items.items()])
g = ListGroup([Link(i, href=i, class_="list-group-item-action") for i in range(10)])
"""
page << Demo(code, "g")
"""
style - reserved for style attribute
pallete - not clear
style_as="primary"
"""
page << html.h2("Cards")
code = """
from kutty import html as h
from kutty import *
def is_link(item):
return isinstance(item, h.HTMLElement) and item.TAG in ["a", "button"]
def ListGroup(items=[]):
g = h.div(class_="list-group")
for item in items:
if is_link(item):
item.attrs["class_"] = item.attrs.get("class_", "") + " list-group-item list-group-item-action"
else:
item = ListGroupItem(item)
g << item
return g
def ListGroupItem(content, active=False):
classes = ["list-group-item"]
if active: classes.append("active")
return h.div(
class_=" ".join(classes),
_content=content)
def Image(src):
return h.img(src=src)
class Card(h.HTMLElement):
TAG = "div"
def __init__(self, header=None, footer=None):
super().__init__(_tag="div", class_="card")
self.header = header or h.div(class_="card-header")
self.body = h.div(class_="card-body")
self.footer = footer or h.div(class_="card-footer")
def is_empty(self, e, class_):
return \
isinstance(e, h.HTMLElement) \
and e.attrs.get('class_') == class_ \
and len(e.children) == 0
def get_children(self):
if not self.is_empty(self.header, "card-header"):
yield self.header
if not self.is_empty(self.body, "card-body"):
yield self.body
yield from self.children
if not self.is_empty(self.footer, "card-footer"):
yield self.footer
def render(self):
attrs = "".join(" " + self._render_attr(name, value) for name, value in self.attrs.items())
children = self.get_children()
content = "".join(c.render() for c in children)
return f"<{self.TAG}{attrs}>{content}</{self.TAG}>"
img = Image("https://via.placeholder.com/150x50")
c1 = Card(header=img)
c1.body << h.h5(class_="card-title", _content="Card with header image")
c1.body << h.p(class_="card-text", _content="Some quick example text to build on the card title and make up the bulk of the card's content.")
c1.body << h.a(class_="btn btn-primary", _content="Go somewhere")
img = Image("https://via.placeholder.com/150x50")
c2 = Card(footer=img)
c2.body << h.h5(class_="card-title", _content="Card Footer Image")
c2.body << h.p(class_="card-text", _content="Some quick example text to build on the card title and make up the bulk of the card's content.")
c2.body << h.a(class_="btn btn-primary", _content="Go somewhere")
img = Image("https://via.placeholder.com/150x50")
c3 = Card(header=img)
c3.body << h.h5(class_="card-title", _content="Card Footer Image")
c3.body << h.p(class_="card-text", _content="Some quick example text to build on the card title and make up the bulk of the card's content.")
c3 << ListGroup(range(5))
c3.footer << h.a("Card Link", class_="card-link")
c3.footer << h.a("Card Link 2", class_="card-link")
gap = html.div(style="margin: 20px;")
card = html.div()
card << c1
card << gap
card << c2
card << gap
card << c3
"""
page << Demo(code, "card")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment