↓Skip to main content

Streamline Web-Development with Bulma CSS Framework

··12 mins
Table of Contents
Recommended basics: Articles you should know

To get the full picture of this article, you should know about this topics:

Even if I have creative ideas, I’m not a designer. I just do not enjoy it enough. So I search for how to achieve my ideas without the need for me to design my stuff myself. If you are in the same position, you will like to hear about CSS Frameworks. In this post you will get in touch with Bulma.

Good to know:

HTML - the hidden power of the WEB

Uncover the essential role of HTML in structuring web content. This post provides a foundational introduction to HTML, highlighting its crucial role in organizing information for browsers. Explore HTML document structure, the significance of head and body sections, and build a step-by-step "About Me" page. Delve into HTML with practical examples, laying the groundwork for further exploration in web development.

You will see how to switch from a custom about me page implementation to an improved version using Bulma in no time.

How to install Bulma #

You can just visit the Bulma website and click the download button. If you like, there’s an extended documentation about multiple ways how to install Bulma.

In more complex projects you probably consider package management:

Efficient Dependency Management with NPM

Learn how to efficiently manage dependencies in your projects using NPM. Avoid losing control and maintain oversight with proper documentation and management techniques.

Finally you need to add Bulma in your project, you can just copy the bulma folder into your project. In the about me page it would look like this:

1
2
3
4
5

.
|- bulma/
|- index.html
|- profile.jpg
|- style.css

Bluma folder placed in WebStorm IDE

IDEs can speed up your work significantly:

Integrating Bulma into the page #

Right now nothing changed. For now this is expected, since we did move Bulma to the correct position but still we do not reference it.

About Me page after bulma added but not included, nothing changed

Bulma comes with a CSS file that we need to reference to make bulma work. Also it’s recommended to add two other header information:

1
2
3

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bulma/css/bulma.min.css">

First we do inform the browser that our file encoding is utf-8 (should be standard nowadays). Also we configure the viewport, so we tell the browser that our page’s width should follow the width of the device and that initially the page should not be zoomed. Lastly we reference Bulma’s CSS file, this will include Bulma in our page:

About Me page after bulma included, not much changed

As you can see, there are some, but not many changes. You know what?: That’s expected. Remember:

Whatever you add to your project, without your support it will not change the world for you.

So let’s move on to get the first benefits from Bulma.

Enhancing Style: Migrating from Custom CSS to Bulma Framework #

Let’s challenge Bulma by replacing our custom CSS implementation with a Bulma-only version.

Even if we delete our CSS now, writing CSS is a good skill to have:

Go ahead and delete the style.css file and it’s reference from head section in your HTML. Finally your files and HTML should look like this:

1
2
3
4

.
|- bulma/
|- index.html
|- profile.jpg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!doctype html>
<html lang="en">
<head>
    <title>Oliver Lippert</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bulma/css/bulma.min.css">
</head>
<body>
<h1>Oliver Lippert</h1>

<img src="profile.jpg" alt="it's me: Oliver Lippert"/><br/>

<a href="https://www.linkedin.com/in/oliver-lippert">Let's connect</a>
</body>
</html>

At this point, your page should look like this:

About Me page with bulma after removing our CSS looks broken

Gladly we can fix this with a few tweaks. Such CSS frameworks often work with CSS classes that you add to existing or new elements. The frameworks mostly just target such elements and do not touch others.

Centering Your Content for a Polished Look #

We wanted to have the content being centered. We achieve this by wrapping our elements inside the body into a div with the following classes: columns is-mobile is-centered mt-6.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<html lang="en">
<head>
    <title>Oliver Lippert</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bulma/css/bulma.min.css">
</head>
<body>
<div class="columns is-mobile is-centered mt-6">
    <h1>Oliver Lippert</h1>

    <img src="profile.jpg" alt="it's me: Oliver Lippert"/><br/>

    <a href="https://www.linkedin.com/in/oliver-lippert">Let's connect</a>
</div>
</body>
</html>

You can read more in the Bulma documentation, here’s a very short description:

  • columns defines, that all elements inside the current one are lined up next to each other.
  • is-mobile prevents them from splitting up even on small screens (probably mostly needed for my screenshots).
  • is-centered defines, that all column’s inside should be centered.
  • mt-6 adds some top margin.

But now we have all items in one line, we don’t want that. That is because inside columns wrapper there should be just column elements, not the content itself. So let’s fix that:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!doctype html>
<html lang="en">
<head>
    <title>Oliver Lippert</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bulma/css/bulma.min.css">
</head>
<body>
<div class="columns is-mobile is-centered mt-6">
    <div class="column is-half has-text-centered">
        <h1>Oliver Lippert</h1>

        <img src="profile.jpg" alt="it's me: Oliver Lippert"/><br/>

        <a href="https://www.linkedin.com/in/oliver-lippert">Let's connect</a>
    </div>
</div>
</body>
</html>

About Me page with bulma columns

Again let me give a short description:

  • column defines the element as a column for the grid system. The basic idea is that you split up the display width in some amount of columns. Each defined column can then define how much columns width it is using. As long as there’s free room, the grid system will line up columns next to each other.
  • is-half defines, that this column should use the space of half of available columns.
  • has-text-centered defines, that all text inside should be centered.

Probably this looks complicated right now, but stick to me, it’s worth it.

Reviving Impactful Headlines with Bulma #

As you probably saw, the headline is not shown as such any longer. It will look nice again after adding the title class to it:

1

<h1 class="title">Oliver Lippert</h1>

About Me page with bulma title

Transforming Square to Circle: Enhancing Your Image with Bulma #

Let’s get the first benefit by rounding the square image, wrap and modify the img like this:

1
2
3

<figure class="image container is-128x128">
    <img class="is-rounded" src="profile.jpg" alt="it's me: Oliver Lippert"/>
</figure>

About Me page with round image

Let’s break down the changes:

  • figure is a HTML element to wrap media files (like images) which can optionally have a caption for the image as well. Feel free to read more about the figure HTML element.
  • image defines, that this figure will wrap an image.
  • container will center the element.
  • is-128x128 will set the image size to 128 px * 128 px.
  • As you can see also we add is-rounded to the img, this finally transforms the square image to a round one.

Elevate Interaction: Implementing a Sleek and Engaging Button Design #

While it’s nice to ask users to connect, it’s to “decent” right now. Add this attribute to your a link: class="button is-primary mt-5":

1
2

<a href="https://www.linkedin.com/in/oliver-lippert"
   class="button is-primary mt-5">Let's connect</a>

About Me page with bulma button

Here’s what happened:

  • button adds the button style to the link.
  • is-primary defines that the button should be styled as a primary button.
  • mt-5 adds some top margin.

Unveiling Bulma’s Design Elements: A Comprehensive Overview #

Bulma has multiple elements and components. Keep in mind: There’s a documentation for bulma.

Let’s walk through a short list of things I would use every now and then.

Mastering Responsive Layouts with Bulma Columns #

I mentioned bulma columns already briefly. It’s basically just a wrapper (usually called row) which holds one or more elements (usually called collumn) and takes control about when to show them in a row and when to split them up into “each on it’s own row”.

columns on the other hand can define if they have a flexible width or specify a width in amount of columns. See a nice visualisation of column widths in Bulma’s documentation.

Once you have done it a few times, you’ll get used to it. The challenging part is (at least for me) always the same: Thinking about how many columns do I use and how wide they should be.

This row / column idea is very important when we talk about responsive design. A column can have multiple width’s assigned based on the available screen width. This way you can have a single HTML code serving various screen sizes. So again: It’s worth diving deeper.

Elevate Design with Bulma’s Box Element #

Using Bulma’s Box element you can draw a shadow around other elements. You can use this to highlight a special section in your page. For example a “subscribe to newsletter” banner or so.

Visualizing Progress: Harnessing Bulma’s Progress Bar Styling #

If you ever need to show the user some progress, Bulma styles progress bars as well. What I really like is it just asks you to add a progress class to HTMLs default progress element.

There’s multiple styling and sizing options, but basically it’s just adding this one class. Easy.

Elevate Visual Appeal with Bulma Cards #

If your project has to do with blog posts or so, you probably are interested in Bulma Cards. It can combine image, author, text and date in a “typical” format. On the other hand it’s very dynamic, you you can use it for other content as well, the documentation shows up some examples.

Transforming Your Profile: Content Enhancements with Bulma #

This was a lot of theory, so let’s get in some practice. You started adding Bulma to your About Me page already, now let’s enhance the page with some more content and features.

Elevate Your Design: Seamless Transition to a Stylish Card Layout #

Your layout is close to a card already so it just makes sense to “migrate”. Since the card will use all available width, you start by rescaling your current column to is-two-fifths.

Now you can start adding the card to the column. I would suggest you do not change the current content right now, but just add the card on top of the column:

1
2
3
4
5
6
7
8

...
<div class="columns is-mobile is-centered mt-6">
    <div class="column is-two-fifths has-text-centered">
        <div class="card">
        </div>
        
        <h1 class="title">Oliver Lippert</h1>
...

Now let’s move your image into the card:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

...
<div class="columns is-mobile is-centered mt-6">
    <div class="column is-two-fifths has-text-centered">
        <div class="card">
            <div class="card-image">
                <figure class="image is-square">
                    <img src="profile.jpg" alt="it's me: Oliver Lippert">
                </figure>
            </div>
        </div>
        
        <h1 class="title">Oliver Lippert</h1>
...

Profile image moved to card

First step done, so now let’s move the name and the link into the card as well. For the name it means

  1. adding a card-content after the card-image,
  2. put a content inside and
  3. write your title in there
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

...
<div class="card-image">
    ...
</div>
<div class="card-content">
    <div class="content">
        <p class="title">Oliver Lippert</p>
    </div>
</div>
...

The link that you currently have as a button, can be integrated as a footer element with the class card-footer, simply move the a into the footer and you’re done.

1
2
3
4
5
6
7
8

...
<div class="card-content">
    ...
</div>
<footer class="card-footer">
    <a href="https://www.linkedin.com/in/oliver-lippert" class="card-footer-item">Let's connect</a>
</footer>
...

This should end up in your HTML code looking like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<div class="card">
    <div class="card-image">
        <figure class="image is-square">
            <img src="profile.jpg" alt="it's me: Oliver Lippert">
        </figure>
    </div>

    <div class="card-content">
        <div class="content">
            <p class="title">Oliver Lippert</p>
        </div>
    </div>

    <footer class="card-footer">
        <a href="https://www.linkedin.com/in/oliver-lippert" class="card-footer-item">Let's connect</a>
    </footer>
</div>

Title and link moved to card

Finally, let’s extend the content slightly, so visitors do understand better who we are. You could go with some technology keywords after your name:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div class="content">
    <p class="title">Oliver Lippert</p>
    Over 15 Year experience in professional software development, including:
    <code>CSS</code>,
    <code>C#</code>,
    <code>Go</code>,
    <code>HTML</code>,
    <code>Java</code>,
    <code>JavaScript</code>,
    <code>PHP</code>,
    <code>TypeScript</code>
</div>

And also you probably want to push my social handle a little more, so you can

  1. add a media element before content
  2. add a media-content element into media
  3. move your title out of content into the media-content
  4. add the class is-4 to your title
  5. add a new p after your title with the classes subtitle is-6
  6. write your handle inside this subtitle
1
2
3
4
5
6
7
8
9

...
<div class="media">
    <div class="media-content">
        <p class="title is-4">Oliver Lippert</p>
        <p class="subtitle is-6">@reliable.codes</p>
    </div>
</div>
<div class="content">
...

And since you probably have another platform than LinkedIn, let’s add another link in the footer for further details

1
2
3
4
5
6

...
<footer class="card-footer">
    <a href="https://reliable.codes" class="card-footer-item">Read more</a>
    <a href="https://www.linkedin.com/in/oliver-lippert" class="card-footer-item">Let's connect</a>
</footer>
...

So far you have achieved two things:

  1. Thanks to Bulma, you dont maintain so much CSS Code yourself
  2. Thanks to Bulma, you have new ideas and new implementation possibilities

Final about me migration to Bulma a card

Quantify Your Experience: Showcasing Key Metrics for Professional Impact #

I think there is some key points which help to understand better who you are. I would say it’s worth highlighting

  1. Years of experience
  2. How many projects you worked on
  3. How many technologies you worked with

Add another column after the current one:

1
2
3
4
5
6
7

...
<div class="column is-two-fifths has-text-centered">
    ...
</div>
<div class="column is-one-fifth">
</div>
...

And inside, for those three topics, place this “template” (for sure you need to modify it):

1
2
3
4
5
6

<div class="has-text-centered mb-6">
    <div>
        <p class="heading">Experience <br> (years)</p>
        <p class="title">15+</p>
    </div>
</div>

Over all it will look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<div class="has-text-centered mb-6">
    <div>
        <p class="heading">Experience <br> (years)</p>
        <p class="title">15+</p>
    </div>
</div>

<div class="has-text-centered mb-6">
    <div>
        <p class="heading">Projects</p>
        <p class="title">50+</p>
    </div>
</div>

<div class="has-text-centered mb-6">
    <div>
        <p class="heading">Technologies</p>
        <p class="title">15+</p>
    </div>
</div>

About me page with key facts

See how easy you can achieve your goal by thinking of what you want to do and then using a framework to get it done?

Ready to share with others? Start hosting your website today:

Effortless Website Hosting on a Budget with Namecheap

Discover how to effortlessly host your website on a small budget with Namecheap's shared hosting. Explore the process from selecting a plan to configuring SSL, and learn to upload your site for a seamless online presence.

Key Takeaways: Mastering Bulma and Streamlining Web Development #

As you can see in this post, things start connect to each other. Knowing (at least basically) HTML and CSS was a key and enables you to understand and using complexer things like a CSS framework. Working with complex projects from within an IDE is helpful.

Please also recognize how I break down the big idea into simple, small and moreover testable baby steps. Personally I like to work this way, since I have a good feeling after every step and I can move on with good confidence to finish what I want to do.

Keep pushing forward: Next articles to improve your skills

With this article in mind, you can keep on reading about these topics:

Efficient Dependency Management with NPM

Learn how to efficiently manage dependencies in your projects using NPM. Avoid losing control and maintain oversight with proper documentation and management techniques.
↑