Adding Bulma CSS to Flask - BulmaPlay

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.  

Flask Bulma CSS

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: - 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:

Flask Bulma CSS - Master Page Layout

How to add another page?
  • First, you need to check out the project. Full instruction can be found in the README file.
  • Open
  • Create another route, let's call it "newpage", accessible via url http://localhost:5000/newpage
def newpage():
    return 'my new page' 

App Screenshots

The main page

Flask Bulma CSS - Main Page

Beautiful Cards

Flask Bulma CSS - Cards Component

Login Page

Flask Bulma CSS - Login Page

Call To Action

Flask Bulma CSS - Call To Action Component

Useful? Sharing is caring. Thank you!
Show Comments

Get the latest posts delivered right to your inbox.