Bulma Css - BulmaPlay, open-source seed project styled with Bulma CSS

Bulma Css - BulmaPlay, open-source seed project styled with Bulma CSS

Hello Coders,

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;

Bulma CSS - BulmaPlay Starter

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://cdn.jsdelivr.net/npm/bulma@0.9.1/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:

The UI is built on Bulma 0.9.1 and provides a few nice common sections used in landing pages:

Features Section
BulmaPlay - Features Section

Pricing Section
BulmaPlay - Pricing Section

More Cards to play with
BulmaPlay - Features Cards

Thanks for reading! For more resources, please access:
Bulma Css - Dashkit
Show Comments