Hello Coder,

This article is about crafting an open-source app (called BulmaPlay) in Flask Microframework and Bulma CSS. Here is the list with topics explained in this small tutorial:

Intro to Bulma CSS

Intro to Flask Microframework

How to use a Jinja2 template

Add authentication to a Flask application

Export statically you web app via Frozen-Flask

Live Deploy with one command

If you are in a rush, click here to visualize the live demo, or here to grab the sources.

What is Bulma

This Modern CSS framework based on Flexbox, seems to get more and more traction as a newcomer in this competitive market, dominated for years by Bootstrap. A few reasons to use it: based on Flexbox, modular design, no Javascript, open-source. If you want to see Bulma CSS in action, take a look here.

What is Flask

Flask (source code) is a Python web framework, mostly used to develop web applications, is also easy to get started with as a beginner because there is little boilerplate code for getting a simple app up and running.

About BulmaPlay

Previously released as a JAMstack application, BulmaPlay is now available as a Flask application, enhanced with database (SQLite), ORM (Sql Alchemy), authentication (login and register) end static export.

Project Structure

In order to help the developers to start fast, the project follows the common, well known structure of a Flask application:

app.py (app starter) in the root of the project

app folder that encapsulates static and templates directories, along with views, models and forms files.

Views.py - the app router

This file is processed by Flask to handle the incoming request and the developer can set the rules that a browser must follow to access the app resources. For this initial release of the app, only three routes are resolved:

The index - that displays the home page

Login - where users can authenticate

Register - where users can register

App templates

For templating, Flask use by default Jinja2, a flexible and blazing fast template engine. Samples:

The master layout page.

Sample page chunks (saved in includes directory): cards, footer

How to add another page?

First, you need to check out the project . Full instruction can be found in the README file.

. Full instruction can be found in the file. Open views.py

Create another route, let's call it "newpage", accessible via url http://localhost:5000/newpage

@app.route('/newpage') def newpage(): return 'my new page'

App Screenshots

The main page

Beautiful Cards

Login Page

Call To Action

Related Flask / Bulma resources

Bulma CSS documentation

More Bulma CSS Apps - Index provided by AppSeed

More Flask Apps - Index Provide by AppSeed

Flask Mega Tutorial - well known Flask tutorial, written by Manuel Grindberg

Useful? Sharing is caring. Thank you!