After using Bootstrap CSS framework for the last few years i decided to move forward with something new:
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:
- Official Documentation
- Bulma Css in 5min
- Get to know Bulma
- Level Up with Bulma
- Apps built with Bulma: BulmaStyle, Bulma Expo, CreativeBulma
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:
Open-Source, Built with Bulma Css, JAMstack app
- Static App, built with Panini Static Generator
- On top of Bulma, jQuery
- Tooling: Gulp, Hot reload, SaaS, FTP deploy script
- License MIT
- Live Demo
How to use it? No worries, You can built it in less than 5min:
git clone https://github.com/rosoftdeveloper/appseed/
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:
- Bulma Expo - official Bulma gallery
- Bulma: CSS framework you should consider
- Bulma Css Apps - Index provided by AppSeed
- Apps built with Bulma - Github Index
- BulmaLanding - Free App built with Bulma CSS
Useful? Sharing is caring. Thank you!