Developer Tools - Bootstrap to Bulma CSS conversion tool (WIP)

Hello Coders,

Thank you for landing on this page. This article presents briefly an open-source conversion tool of a legacy app, styled with Bootstrap to Bulma CSS, open source CSS framework based on Flexbox.

The source code is committed on Bootstrap to Bulma CSS Github repository - MIT license. Inspired by Tailwindo (Php based)

Bootstrap CSS

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.


Bulma CSS

Bulma is a free, open source CSS framework based on Flexbox.


The Implementation

The tool will apply a short list of actions on each HTML file detected in a target directory:

  • Detect the lines where Bootstrap CSS is loaded and replace with Bulma CSS
  • Scan the HTML and replace the Bootstrap classes with the corespondent ones in Bulma, based on a pre-loaded map
  • The changes are reflected in the browser via a LIVE edit option

Bootstrap to Bulma Class mapping

Full mapping definitions committed on Github. The information is structured in sections:

Media (Bootstrap / Tailwind):

  • "xs -> TBD"
  • "sm -> TBD"
  • "md -> TBD"

Grid (Bootstrap / Tailwind):

  • "1 -> TBD"
  • "2 -> TBD"
  • "3 -> TBD"
  • "4 -> TBD"

To see the full mapping, please access this link.


Resources

Show Comments

Get the latest posts delivered right to your inbox.