Moving from Bootstrap to Bulma CSS

Hello Coders,

After using Bootstrap CSS framework for the last few years i decided to move forward with something new:

Bulma CSS

The Open-Source CSS Framework based on Flexbox

From the beginning, I must say i'm not a CSS guru, i'm just a web developer in search of something simple, trendy and sustained by a large community. After looking at numbers (34k stars on Github), official Bulma docs and googling a little bit, i decided to built a few project with this CSS framework.  

Inspiration to start:

Now back to my work: to build my first project i was looking for a Bulma starter, to add my code on top. At this point i was a little bit disappointed, i must say. Even this framework is nice and very well documented, finding a good starter can be challenging, and with a some luck i found this starter, coded by CSS Ninja team.  

Ok, so at this point i was familiar with Bulma, i had a broken starter and the will to build something and release it into the wild.    

The next steps to make it happen:

  • Study the starter structure. I found that it was built on top of a simple static generator called Panini. This generator is quite nice and minimal and uses html / markup mixins to generate websites. Because i'm a huge fan of JAMstack apps this was a very positive sign.
  • Patch the build scripts to produce the website
  • Refactoring a little the project and enhance it with FTP deployment script
  • Edit the pages and sections, customize the SaaS files and add images from Absurd.Design (btw, this project is very creative and anyone can use their images with a back link)

Now the result:

BulmaPlay

Open-Source, Built with Bulma Css, JAMstack app

Main Screen Shot of BulmaPlay - Free app built with Bulma CSS.

App Features:
  • Static App, built with Panini Static Generator
  • On top of Bulma, jQuery
  • Tooling: Gulp, Hot reload, SaaS, FTP deploy script
  • License MIT
  • Live Demo

Screen Shot of BulmaPlay - Free app built with Bulma CSS.

Screen Shot of BulmaPlay - Free app built with Bulma CSS.

How to use it? No worries, You can built it in less than 5min:

git clone https://github.com/rosoftdeveloper/appseed/
cd jamstack/bulmaplay
yarn # install dependencies
yarn start # start the app in development mode
yarn deploy # live deployment, via FTP Info: edit FTP credentials in deploy.js

Other Bulma CSS resources:

Useful? Sharing is caring. Thank you!
Show Comments

Get the latest posts delivered right to your inbox.