What is Bulma? Advantages & disadvantages of using Bulma.

What is bulma?

Bulma solves a lot of problems-a lot. Whether you need a visual component, or you want to understand how a component might be codified, with best practices and best-in-class documentation, Bulma’s here to help! ?‍?

Bulma’s not even version 1.0, and has major adoption with 150K+ downloads a month and 26K+ stars on GitHub. Think of Bulma as a competitor to Bootstrap, despite the fact that it’s *just* CSS. ?

How does Bulma work?

Bulma uses several techniques to create a cohesive interface for front-end developers. We need- just be concerned with describing our website’s design using semantic classes — not elements — or in other words, idiomatic templates.

These semantic templates can be thought of as interconnecting building-blocks we use to build websites fast! These components are also responsive out-of-the-box, meaning we can focus more on our content than the code.

- The Possibilities of Bulma CSS

The Flexbox layout is a popular solution for developers, as it allows individuals to improve item alignment, order, and directions in containers even when they’re in a dynamic setup. Since a lot of web applications need to be primed to work on any system today, it’s a good idea to use a CSS that’s based on a system like Flexbox if you want your apps to be responsive.

Aside from its Flexbox-based nature, which ensures that grid items and vertically-aligned components look incredible on your system, Bulma has a lot of other great benefits to offer too, including:

• Responsivity : The framework is mobile first and works similarly to the popular Bootstrap CSS.
• Well-documented : Often a very important component for developers, Bulma is very well documented, and comes with an active community of people ready to help with projects.
• Solid foundation : Bulma comes packed with all of the goods you would expect from a CSS framework, including diverse typography, buttons, forms, tables, and more.
• Various components : Bulma is packed with a vertical alignment solution, layouts, and various media objects.
• Modular : The Bulma setup is built with Sass, which means that you can design your framework step by step with only the features you need.

For many developers, building sites and applications with Bulma is easy. Because there are so many features to access straight out of the box, there’s not as much code writing to do. Let’s look at some of the most compelling features of Bulma in closer detail.

Modifiers
Want to create a completely unique app or website? With Bulma, you can. Many of the elements, such as buttons and tables, come with alternative styles to choose from. All you need to do to apply modifiers to your preferred elements is append one of the easy modifier classes that start with has- or is-. This means that you can change-text size, style, colour, and a lot more.

Columns
The responsive columns in Bulma are easy to create and optimise according to your personal preferences. You can add as many columns as you want to a page in different colours, and every column will be an equal width, leading to a more clean and clear page set-up. You can control sizes, grid layout, and more based on nesting and viewport, as well as sizing the gap between columns. Because Bulma is based on Flexbox, if you don’t want to play with anything, you can still rest assured that everything will look even on your app.

Layout
Probably one of the best sections of the Bulma CSS, the layout section is brimming with customisation options to choose from. While other frameworks give you the basics like forms, styling, and buttons, Bulma has a range of unique layout components. There’s a “Hero” section where you can showcase major titles and pictures on your design, as well as a “level” feature which means that you can vertically centre different elements of your application or design.

Forms
Forms can be an important part of a website or application, and Bulma allows you to create yours with ease. With plenty of form control classes supported, the solution is designed for consistency. The “control” container allows you to enhance various single form controls, so you can have the perfect input for each page.

- Is Bulma Right for You?

Similar in design to the Bootstrap CSS, Bulma is incredibly lightweight and easy to use. It makes customising and creating applications easy for developers with any background, and it also ensures that front-end experts can build next-level designs with integrated Flexbox responsivity.

- Bulma components

Bulma components are at the core of our design. Despite that it can be fun, we don’t have to write CSS from *scratch* to create a beautiful design. Instead, we can lean into successful frameworks to arbitrate components.

Now, because Bulma can be terse or difficult to understand at first blush, ? I’ve recreated the design using ASCII art to demonstrate how we might model the design using different Bulma components:

The truth is, Bulma is more terse, but that’s understandable given it’s HTML. Note I’m also obfuscating a few details to better emphasize how Bulma works. You can, however, view this interactive screencast to see the full code. ?

Take a second look; notice .container (.grid) and.columns (.grid-xl)? The first one, for example, would translate to class=”container grid” This is *how* we can interpolate our grid with Bulma’s components!

You can learn more about Bulma’s components ? here. In this blog design, we used section, container, breadcrumb, media, image, columns, and content. And, despite that I’ve obfuscated it, we used modifiers too! ?

- Quick install

Bulma is constantly in development! Try it out now:

NPM
npm install Bulma

Import
After installation, you can import the CSS file into your project using this snippet:
import ‘bulma/css/bulma.css’

CDN
https://cdnjs.com/libraries/bulma

CSS only
Bulma is a CSS framework. As such, the sole output is a single CSS file:

bulma.css
You can either use that file, “out of the box”, or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered “environment agnostic”: it’s just the style layer on top of the logic.

- Browser Support

Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of :

Internet Explorer (10+) is only partially supported.
Code requirements#

For Bulma to work correctly, you need to make your webpage responsive.
1) Use the HTML5 doctype
<!DOCTYPE html>

2) Add the responsive viewport meta tag
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Starter template#

If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer.

<!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.5/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>

Bulma Advantage:
1) Lightweight
The CSS file of this framework is very lightweight as well as simple to customize.
2) Easy to Use
3) Responsive Design
4) Based on Flexbox
It allows our Front-end development experts to build fancy designs with integrated Flexbox.
5) Highly customizable and modularizable
6) Simple syntax :
The syntax uses a lot of is-center, is-child, button is-primary. It just reads well and makes sense.

Bulma Disadvantage:

1) The CSS of this framework runs very slow on IE web browser.
2) It is still in the development phase and final version is yet to come.
3) Fairly new, not as large of a community

We, have implemented BULMA in one of our projects and due its lightweightness site loads in microseconds as compared to normal bootstrap loading. You can check the live example here.