If you've ever spent hours tweaking CSS just to get a simple layout to work across different devices, you're not alone. While researching, I came across Bulma CSS. It's a lightweight CSS framework with a component-based approach that simplifies the process of building responsive websites. Whether you're a seasoned developer or just starting out, Bulma offers a straightforward approach to creating flexible designs without getting bogged down by complex styling.
What is Bulma CSS?
Bulma is a modern CSS framework that helps you design clean and responsive websites quickly. Unlike other frameworks that require you to work with complex JavaScript, Bulma is built entirely with CSS, making it lightweight and easy to use. It offers a flexible grid system, components for navigation, buttons, forms, and more, and everything you need to get a website up and running with minimal effort.
Why Choose Bulma CSS?
Here are 4 standout features that make Bulma CSS effective for both beginners and experienced developers alike:
- Simplicity and Readability
- Responsive Design Built-In
- Flexible and Easy-to-Use Grid System
- Quicker prototyping
Simplicity and Readability
One thing that stands out about Bulma is how simple it tries to make things. It uses Flexbox under the hood, which can make layout creation easier than writing traditional CSS. The class names are pretty clear, so it's not hard to understand what each one does at first glance. That said, it does feel a bit limiting at times. Instead of allowing for more flexibility, you’re often left working within the framework's constraints. While it’s definitely easier than writing long CSS rules, I can’t help but feel that it doesn’t offer the same level of control and customization that other frameworks like Tailwind provide. For simple projects or quick prototyping, it’s fine, but if you want more freedom, it might leave you wanting more.
<div class="container">
<h1 class="title has-text-centered">Grocery Store</h1>
<div class="card has-background-grey-lighter ">
<div class="card-content is-justify-content-center is-align-items-center">
<h2 class="title has-text-centered">Vegetable</h2>
<p class="has-text-centered">This should be nutrition facts about a vegetable.</p>
<button class="button is-rounded custom-blue-button m-3">Buy Now</button>
</div>
</div>
</div>
In this example, Bulma provides minimally styled components out of the box, but to add custom stylings like colors.
To style Bulma components, you would either have to do some inline styling on the component itself or add CSS rules in a styles.css.
Here's how I did it for this Vegetable card.
body {
padding: 24px;
margin: 0;
height: 100vh;
}
.custom-blue-button {
background-color: #007ACC; /* Custom blue color */
color: white; /* White text */
border: none; /* Remove border */
}
.custom-blue-button:hover {
background-color: #005f8c; /* Darker blue on hover */
color: white; /* Keep the text color white */
}
Responsive Design Built-In
Bulma comes with a grid system that simplifies building responsive layouts. Instead of manually writing media queries, you can rely on its predefined classes to adjust the layout for different screen sizes. This can save time and reduce the hassle of tweaking your design for various devices.
For instance, creating a grid layout with cards that reshapes based on screen size is straightforward with Bulma’s classes. It’s a helpful feature, especially if you’re looking for a quick way to ensure your site looks good on phones, tablets, and desktops.
<div class="columns is-multiline">
<div class="column is-12-mobile is-6-tablet is-4-desktop">
<div class="card">
<div class="card-content has-background-grey-lighter">
<h3 class="title">Kiwi</h3>
<p>are brown but green on the inside!</p>
</div>
</div>
</div>
<div class="column is-12-mobile is-6-tablet is-4-desktop">
<div class="card">
<div class="card-content has-background-grey-lighter">
<h3 class="title">Cherry</h3>
<p>on top!</p>
</div>
</div>
</div>
<div class="column is-12-mobile is-6-tablet is-4-desktop">
<div class="card">
<div class="card-content has-background-grey-lighter">
<h3 class="title">Strawberry</h3>
<p>tastes good.</p>
</div>
</div>
</div>
</div>
Below, is how these screen sizes are reshaping the way the cards are displayed.
Mobile Screens
Medium Screens
Larger Screens
Here, the columns class defines the overall grid, and each column gets specific classes for different screen sizes like is-12-mobile, is-6-tablet, and is-4-desktop. These classes ensure that the layout adjusts accordingly: one column on small screens, two on tablets, and three on desktops.
Flexible and Easy-to-Use Grid System
The grid system in Bulma is simple yet powerful. It’s built using Flexbox, making it easy to create both simple and complex layouts. The grid is based on a 12-column structure, so you can easily adjust the width of columns by specifying the number of columns you want them to span. The grid system is flexible and supports both fixed-width and fluid columns.
For example, to create a two-column layout on a desktop and stack them on mobile, you can use:
<div class="columns">
<div class="column is-half">
<p>Column 1 content</p>
</div>
<div class="column is-half">
<p>Column 2 content</p>
</div>
</div>
In this layout, is-half makes each column take up 50% of the container’s width. On smaller screens, the columns automatically stack on top of each other, so you don’t have to write custom media queries.
Quick Prototyping
With Bulma, you can create prototypes quickly by simply using the pre-defined classes. If you want to slap together some components with minimum styling, Bulma is great for that. The minimalistic design system of Bulma also means you can easily tweak or extend the styles to fit your project’s needs. Want to change the primary button color? Just update the button class with a different modifier, like is-link for a blue button, or is-danger for a red one.
Here’s a simple navigation bar using Bulma's predefined class:
<nav class="navbar is-primary">
<div class="navbar-brand">
<a class="navbar-item" href="#">Brand</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Services</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
Mobile Screens
Larger Screens
The navbar, navbar-item, and navbar-burger classes are all part of Bulma’s pre-defined component system. You can use them to create a fully responsive navigation bar without writing any custom CSS.
Conclusion
While using Bulma CSS, I would say it has been an interesting experience. While it’s a solid framework that provides a set of pre-styled components, it feels a bit more traditional compared to utility-first frameworks like Tailwind. Bulma is great for beginners looking for a simple, flexible design system, but it doesn’t offer the same level of customizability and control that Tailwind does.
To be honest, Bulma is a good starting point for those just getting into CSS frameworks, but there are probably better frameworks to invest your time in.
Top comments (1)
Absolutely incredible! 😻.