Bulma, the flexbox-based css framework makes website design painless. If you don't know what flexbox is, you have missed one of the most important css features of the last years.
First published: 08/01/2021 | Last update: 04/02/2021
To put it in the nutshell, flexbox allows working with rows and columns to distribute the available space. This concept has been used in gui layout managers for many years but was missing in css. Many frameworks aimed to either mimic or substitute this feature with their own "grid layouts". Since the introduction of flexbox in 2017 making flexible, responsive layouts has become a lot easier. However, many other frameworks still support the old "make do" approach along with flexbox which adds some overhead.
The fact that bulma does not ship with any JavaScript to add things like toggling visibility etc. seems a bit odd but in fact makes integration with existing JavaScript frameworks a lot easier at the same time that it stays totally framework agnostic.
This means that you must have a minimum of JavaScript knowledge to make use of features such as modal dialogs or Burger. But it also means that you do not have to drag along JavaScript libraries of which you will only use five percent of their features.
Bulma comes with just enough classes and components to quickly build a responsive web site.
- Helper classes for colors, typography, spacing, visibility, flexbox behavior and more,
- Layout elements such as container, media object, section, tiles, level, hero and footer,
- Elements like button, block, image, content, and much more,
- Form elements such as input, textarea, checkbox, etc.,
- Multipart components, for example navbar, menu, panel, card, tabs, pagination and much more
As with most modern css frameworks Bulma uses sass which means that you can easily build a customized version. However, if you don't want to you do not have to. You can either include a link pointing to the cds version or host the pre-built version without any modifications.
If you are familiar with sass, not only can you customize bulma, tweaking things such as colors, typography, breakpoints and many other things, you can also include only those parts that you actually need.
The pre-built css with everything included is 241,4 kbytes, the minified version 204 kbytes. If you are looking for a javascript framework agnostic css framework, Bulma is definitely worth a look.
For more information: https://bulma.io/