This article presents an open-source seed project generated by AppSeed on top of Fresh UI Kit, a popular Bulma CSS design crafted by CssNinja. Project comes with a simple Flask codebase to be used in any Python-based web aplication with ease. For newcomers, Bulma is a popular open-source CSS framework based on Flexbox. With more than 40k stars on Github and 300+ contributors, Bulma is a great alternative to Bootstrap being modular, developer-friendly, and easy to customize.
Thanks for reading! TL;DR;
- BulmaPlay - the product page (Free)
- BulmaPlay Demo - LIVE Deployment
- Dashkit Flask - the premium version (more pages and components)
What is Bulma
As defined in the official website, Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
With more than 40k stars on Github and 300+ contributors, Bulma can be used to code complex UI interfaces by reusing the helpers and primitives provided in this modern CSS Framework - other features:
- Modern Framework - based on Flexbox specifications
- Mobile first, responsive
- Lightweight, modular and JS Free
- Built-in components: Cards, Tabs, Menus
To build fast a starter with Bulma takes less than a minute:
<!DOCTYPE html> <html lang="en"> <head> <title>Bulma CSS - Starter Page</title> <link rel="stylesheet" href="https://firstname.lastname@example.org/css/bulma.min.css" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" /> </head> <body> <div class="container is-fluid"> <!-- Add here Bulma Stuff --> </div> </body> </html>
This minimal sample can be extended with ease to add more components and sections: buttons, cards.
BulmaPlay - Open-Source Starter
This Flask starter is coded on top of Fresh UI Kit, a popular one-page Bulma design crafted by CssNinja.
For those that find the HTML version useful, please access the below links:
- Fresh Landing page - the sources published on Github
- Bulma-Css - for more Bulma-based projects (free & commercial)
The UI is built on Bulma 0.9.1 and provides a few nice common sections used in landing pages:
More Cards to play with
Thanks for reading! For more resources, please access: