Learn Bulma CSS in 5 minutes – A tutorial for beginners
Introduction
As a web developer, you know how crucial it is to have a solid grasp of CSS. But let‘s be honest, writing all the styles for a website from scratch can be tedious and time-consuming. That‘s where CSS frameworks come in to save the day.
One rising star in the world of CSS frameworks is Bulma. Bulma is a modern, lightweight, and easy-to-use framework that can help you quickly build attractive, responsive websites. Best of all, it‘s simple enough that even complete beginners can pick it up rapidly.
In this tutorial, we‘ll cover everything you need to start using Bulma productively in just 5 minutes. We‘ll go over installation, core concepts, and examples of the most useful components. By the end, you‘ll be ready to dive into the Bulma docs and start using this powerful tool in your own projects. Let‘s get started!
Setup
Before we can start using Bulma, we need to include it in our project. Bulma offers several ways to do this:
- CDN link: The simplest method. Just add this
<link>tag in your HTML file‘s<head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">- NPM: If you‘re using a module bundler like Webpack, you can install Bulma as a package:
npm install bulmaThen import it into your main JavaScript/CSS file:
import ‘bulma/css/bulma.css‘;- Download: You can download the Bulma CSS file directly from the Bulma website and include it in your project.
For this tutorial, we‘ll use the CDN method for simplicity. But feel free to use whichever approach fits your workflow best.
Core Concepts
Before diving into examples, let‘s cover some core concepts you‘ll need to understand to use Bulma effectively.
Modifiers
Modifiers are classes that allow you to customize the style of almost any Bulma element. They all follow a consistent naming pattern: is-* or has-*.
For example, to make a button large and green, you would add the classes is-large and is-success:
<button class="button is-large is-success">
Click me!
</button>This consistent naming makes modifiers intuitive and easy to remember.
Columns
Columns are the foundation of Bulma‘s responsive grid system, which is based on Flexbox. To create a row of columns, you use a columns container with column children:
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
</div>By default, columns will automatically be equal width and expand to fill the row. You can control their sizing with modifier classes like is-half, is-one-third, etc.
Components
Bulma provides a variety of pre-built UI component classes that you can use to quickly compose interfaces. Some examples include:
- Card: A flexible content container with optional header, image, and footer
- Dropdown: A toggleable menu for displaying lists of links
- Modal: A classic overlay dialog for getting user input or showing more info
- Navbar: A responsive horizontal navigation bar
- Pagination: Navigation for multi-page content
- Tabs: Vertically or horizontally organized navigation
These components provide attractive default styles, but can easily be customized with modifier classes and your own custom CSS.
Elements
In addition to high-level components, Bulma also provides classes for styling basic elements like:
- Buttons
- Forms
- Icons (using FontAwesome icons)
- Images
- Tables
- Tags
- Titles
Using Bulma classes keeps your markup semantic and provides a consistent look and feel without having to write a lot of custom styles.
Responsiveness
Bulma is mobile-first and provides a responsive grid system and element styles out-of-the-box. The grid columns and many components will automatically stack vertically on small screens.
You can customize how elements respond to different screen sizes using Bulma‘s breakpoint modifier classes:
is-mobile: < 768pxis-tablet: >= 769pxis-desktop: >= 1024pxis-widescreen: >= 1216pxis-fullhd: >= 1408px
For example, to make a column 50% width on desktop but 100% width on mobile, you‘d use:
<div class="column is-half-desktop">
...
</div>Example UI
Now that we‘ve covered the key concepts, let‘s walk through an example of using Bulma to build a pricing table component.
Here‘s the HTML markup:
<div class="columns">
<div class="column">
<div class="card">
<div class="card-header">
<p class="card-header-title">Basic</p>
</div>
<div class="card-content">
<p class="is-size-1 has-text-centered">$10</p>
<p class="has-text-centered">per month</p>
<hr>
<ul>
<li>10 users</li>
<li>2 GB storage</li>
<li>Email support</li>
</ul>
</div>
<div class="card-footer">
<a href="#" class="card-footer-item">Buy Now</a>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-header">
<p class="card-header-title">Pro</p>
</div>
<div class="card-content">
<p class="is-size-1 has-text-centered">$20</p>
<p class="has-text-centered">per month</p>
<hr>
<ul>
<li>100 users</li>
<li>20 GB storage</li>
<li>Priority email support</li>
</ul>
</div>
<div class="card-footer">
<a href="#" class="card-footer-item">Buy Now</a>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-header">
<p class="card-header-title">Enterprise</p>
</div>
<div class="card-content">
<p class="is-size-1 has-text-centered">$50</p>
<p class="has-text-centered">per month</p>
<hr>
<ul>
<li>Unlimited users</li>
<li>100 GB storage</li>
<li>24/7 phone & email support </li>
</ul>
</div>
<div class="card-footer">
<a href="#" class="card-footer-item">Contact Sales</a>
</div>
</div>
</div>
</div>As you can see, it makes heavy use of Bulma classes:
- The top-level
columnscontainer divides the pricing tables into a row - Each table is a
cardcomponent with acard-header,card-content, andcard-footer - Modifier classes like
is-size-1andhas-text-centeredare used to customize font size and alignment - The
<hr>element provides a simple horizontal divider
With just ~50 lines of HTML and zero custom CSS, we have a professional-looking pricing table component that‘s fully responsive:
On mobile, the columns automatically stack vertically:
This ability to build complex, responsive UI so quickly and with so little code is one of Bulma‘s biggest strengths. And it‘s all done with simple, semantic classes – no messy nested CSS selectors!
Customizing Bulma
Bulma‘s default styles are very attractive and work great for many projects out-of-the-box. But there are a couple ways to customize it when needed:
-
Add your own custom CSS that overrides specific Bulma styles. Because Bulma uses semantic, single-class selectors, this is generally pretty easy to do without crazy specificity wars.
-
If you‘re using Sass in your project, you can customize Bulma‘s variables, which control things like colors and type scale. Just import the Bulma Sass files into your main
.scssfile:
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/grid/columns.sass";Then define your custom variables before the imports:
$primary: #my-custom-primary-color;
$family-sans-serif: "My Custom Font", sans-serif;This gives you a lot of control over the look and feel without having to write a lot of custom CSS.
Conclusion
I hope this tutorial has given you a solid foundation for working with Bulma. We‘ve covered:
- How to install Bulma in your project
- Core concepts like modifiers, columns, components, and responsiveness
- A real-world example of building UI with Bulma
- How to customize Bulma to fit your needs
Bulma can be a huge productivity boost, especially for solo developers or small teams who want to build professional-looking interfaces quickly. Its simple, consistent class-based approach makes it easy to pick up, even for those new to CSS frameworks.
Where you go from here is up to you, but some great next steps are:
- Explore the Bulma docs, especially the Components section, to get a sense of what else is possible
- Convert a UI mockup or wireframe to HTML/Bulma to practice your new skills
- Read through the Bulma source code on GitHub to see how it works under-the-hood
- Incorporate Bulma into your next project and experience the productivity boost!
I genuinely believe Bulma is one of the most beginner-friendly and useful CSS frameworks out there today. I hope this tutorial has encouraged you to give it a try. Best of luck on your Bulma journey!