fh-frankenui 0.0.1

A FastHTML plugin for using franken-ui easier

fh-frankenui

Wrapper for Franken UI to be used with fasthtml. This package is in development not ready for general use.

What is Franken UI?

At it's simplest, it is a helper to build HTML class strings used in the Franken UI library. This is done through:

• Using enums to give autocomplete via python
  • style.Text.danger = 'uk-text-danger'
  • style.Background.primary = 'uk-background-primary'
  • style.Text.bold = 'uk-text-bold'
• Ability to add to add classes together to build a new class string
  • s.Text.center + s.H.h2 + s.Background.primary = Str('uk-text-center uk-h2 uk-background-primary')
  • s.Text.center + s.H.h2 + s.Background.primary + 'your-own-class-string' = FrankenStr('uk-text-center uk-h2 uk-background-primary your-own-class-string')
• Theme selection
  • s.Theme.blue.headers(): Gives CSS and JS headers for the blue theme

How do I use it?

# without wrapper
P(cls='uk-text-center uk-h2 uk-background-primary')("Your Title")

# with wrapper
P(cls=Text.center + H.h2 + Background.primary)("Your Title")

# without wrapper
P(cls='uk-text-center uk-h2 uk-background-primary my-own-class-string')("Your Title")

# with wrapper
P(cls=Text.center + H.h2 + Background.primary + 'my-own-class-string')("Your Title")

# without wrapper
app = FastHTML(hdrs = [Script(src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit.min.js"),
                        Script(src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit-icons.min.js"),
                        Link(rel="stylesheet", href="https://unpkg.com/franken-wc@0.0.6/dist/css/blue.min.css")])

# with wrapper
app = FastHTML(hdrs = Theme.blue.headers())