DEV Community

loading...
Cover image for Bulma CSS - Open-Source LIVE Editor

Bulma CSS - Open-Source LIVE Editor

sm0ke profile image Sm0ke Originally published at blog.appseed.us Updated on ・2 min read

Hello Coders,

This article presents an open-source tool for Bulma CSS, a popular framework based on Flexbox. The product allows to edit and download components crafted on top of this popular framework. The core project can be downloaded from Github and used locally for unlimited hobby & commercial projects.


Thank you! Content provided by AppSeed - App Generator.



Bulma CSS - LIVE Editor, animated presentation.


Using the product is fairly simple. We can access the LIVE deployment, edit the existing components and download the code or clone the project from the public repository and compile from sources.


Sections and elements



For each element, we can toggle the dark-mode and all changes are reflected instantly in the viewer. Samples:


Bulma CSS - Pricing Card


Bulma Css - Pricing card component.


Bulma CSS - Login Box


Bulma CSS - Login Box Component.


Bulma CSS - eCommerce widget


Bulma CSS - eCommerce product card, animated presentation.


Being a young project, the feedback/suggestions and contributions are welcomed - More resources:


Btw, my (nick) name is Sm0ke and I'm pretty active also on Twitter.

Discussion (2)

pic
Editor guide
Collapse
uithemes profile image
ui-themes

Really nice that Dark Mode - From what I know is not supported natively in Bulma.

Collapse
sm0ke profile image
Sm0ke Author

Indeed, is provided via a small CSS on top of the latest Bulma 0.9.1