Bulma is a Flexbox-based CSS framework for creating responsive and mobile-first projects.
The panorama of CSS frameworks is enriched every day with more high-quality tools, and this is good news for all front-end Web developers. The potential offered by CSS3 is enormous, but with great powers comes great responsibility, therefore an instrument that offers a stack of high-level controls, respectful of the most rigorous quality standards with which to create new generation user interfaces, responsive and mobile-first, it is strongly necessary.
In addition to the famous Bootstrap, w3.css and Foundation, we analyze today Bulma , a modular CSS framework, open-source and entirely based on Flexbox technology , currently used by more than 100,000 developers.
Being based on Flexbox, the possibilities offered by Bulma are almost endless, and compatibility with browsers and devices depends on their support for this standard.
The installation of Bulma is a very simple procedure, we can use npm, the appropriate CDN or local download. The basic template, to verify that everything works, is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> </head> <body> <section class="section"> <div class="container"> <h1 class="title"> Hello World </h1> <p class="subtitle"> My first website with <strong>Bulma</strong>! </p> </div> </section> </body> </html>
The official documentation covers all the components of every single product API, from the simplest classes for textual and formatting controls, up to the most advanced and complex ones like the generation of modern layouts and effects (tooltips, accordions, scrollbars, menus and etc).
In the demo section instead, we find a collection of videos that in addition to explain perfectly the functioning of the framework, show the concrete results we can achieve.