https://github.com/gardsted/bulmate

bulmate is a library for creation of server-rendered dynamic, responsive html-pages using bulma as the css library, dominate for tag-rendering and cccp for the dynamic part, which consists of appending to live dom elements, prepending to live dom elements and replacing live dom elements using callbacks that fetch server rendered snippets. It uses the javascript libraries axios, jquery and fortawesome.
https://github.com/gardsted/bulmate

Last synced: 3 months ago
JSON representation

bulmate is a library for creation of server-rendered dynamic, responsive html-pages using bulma as the css library, dominate for tag-rendering and cccp for the dynamic part, which consists of appending to live dom elements, prepending to live dom elements and replacing live dom elements using callbacks that fetch server rendered snippets. It uses the javascript libraries axios, jquery and fortawesome.

• Host: GitHub
• URL: https://github.com/gardsted/bulmate
• Owner: gardsted
• License: mit
• Created: 2020-03-15T07:34:21.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-15T12:38:54.000Z (about 5 years ago)
• Last Synced: 2025-01-17T11:47:51.276Z (4 months ago)
• Language: Python
• Size: 321 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.in
  • Changelog: HISTORY
  • License: LICENSE

Awesome Lists containing this project

README

        
# bulmate THE_VERSION_STRING

bulmate is a library for creation of server-rendered dynamic, responsive html-pages using bulma as the css library, dominate for tag-rendering, and cccp for the dynamic part, which consists of appending to live dom elements, prepending to live dom elements and replacing live dom elements using callbacks that fetch server rendered snippets. It uses the javascript libraries axios, jquery and fontawesome.

For more of the superpowers of cccp, refer to that project's [excellent documentation and examples](https://github.com/sloev/cccp).

In order to know more about how the inner dynamics of the tag rendering works, refer to the [brilliant documentation](https://github.com/Knio/dominate) of dominate.

Finally Bulma. There is no way You can use this library effectively without reading some of the [extraordinarily bright bulma documentation](https://bulma.io/documentation/).

## Responsive rendering

An reasonably comprehensive example in a flask view could look like this - it will showcase **section**, **hero**, **columns**, and **tile**.

### The wide version

![](example-v0.0.1.png)

### The tall version

![](example-responsive-v0.0.1.png)

Here is the current code

    @blueprint.route('/', methods=["GET"])

    def root():

        return t.html([

    	t.head([bulmate.init(cors=True)]),

    	t.body([

    	    t.hero([

    		t.hero_body([

    		    t.container([

    			t.h1("hero title", cls="title"),

    			t.h2("hero subtitle", cls="subtitle"),

    		    ])

    		]),

    	    ]),

    	    t.section([

    		t.columns([

    		    t.column([t.notification("first column", cls="is-primary has-text-centered")]),

    		    t.column([t.notification("second column", cls="is-primary has-text-centered")]),

    		    t.column([t.notification("third column", cls="is-primary has-text-centered")]),

    		    t.column([t.notification("fourth column", cls="is-primary has-text-centered")]),

    		])

    	    ]),

    	    t.section([

    		t.tile([

    		    t.tile([

    			t.tile([

    			    t.tile([

    				t.tile([

    				    t.p("vertical?", cls="title"),

    				    t.p("or what?", cls="subtitle"),

    				], cls="is-child notification is-primary", tagname="article"),

    				t.tile([

    				    t.p("vertical?", cls="title"),

    				    t.p("or what?", cls="subtitle"),

    				], cls="is-child notification is-warning", tagname="article"),

    			    ], cls="is-parent is-vertical"),

    			    t.tile([

    				t.tile([

    				    t.p("middle", cls="title"),

    				    t.p("with an image", cls="subtitle"),

    				    t.image([t.img(src="https://bulma.io/images/placeholders/640x480.png")], cls="is-4by3"),

    				], cls="is-child notification is-info", tagname="article"),

    			    ], cls="is-parent"),

    			]),

    			t.tile([

    			    t.tile([

    				t.p("wide", cls="title"),

    				t.p("aligned with right", cls="subtitle"),

    				t.content("lotsatext"),

    			    ], cls="is-child notification is-danger", tagname="article"),

    			], cls="is-parent"),

    		    ], cls="is-vertical is-8"),

    		    t.tile([

    			t.tile([

    			    t.tile([

    				t.p("tall tile", cls="title"),

    				t.p("with much more text", cls="subtitle"),

    				t.content("lotsamoretext"),

    			    ], cls="is-child notification is-success", tagname="article"),

    			] ),

    		    ], cls="is-parent"),

    		], cls="is-ancestor")

    	    ]),

    	]),

        ]).render()

## dynamic pages with server rendered snippets

### A Shining example

THE_SHINING_EXAMPLE

### Only the wide version shown

![](example-dynamic-v0.0.2.png)

## rendered tags, alphabetically

Here is, for each tag, how it renders with no arguments, for example:

    import bulmate.tags as t

    t.panel().render()

    t.panel(cls="is-success").render()

    t.panel(cls=["is-success", "my-own-class"]).render()

    t.panel(cls="is-success my-own-class").render()

    t.panel(cls=["is-success", "my-own-class"], children=[t.p("some text")]).render()

would produce

    ''

    ''

    ''

    ''

    '\n  
some text
\n'


using the **children** keyword is an addition compared to vanilla dominate - it makes sense to be 

able to transfer children as a keyword argument, as the example above seems bulky for bulma,

specifying the classes always at the end of the arguments.

THE_RENDERED_TAGS

## History

THE_HISTORY