Bulma CSS Framework

To make an attractive website with a consistent, clean user interface and a responsive layout, you could write a whole lot of CSS rules… or you could use a CSS framework.

A CSS framework is a collection of CSS rules (and sometimes related JavaScript code) that provides a pre-made foundation for building websites and web applications. Using a framework’s reusable CSS classes and pre-designed components, developers can quickly build and style their HTML, streamlining the process of creating responsive layouts and visually consistent designs. By leveraging the framework’s ready-made styles, developers can significantly reduce the amount of custom CSS they need to write.

In this class, we will be using the Bulma CSS framework. Bulma’s own site promotes the following features of the framework:

  • “100% Responsive” — Bulma is designed “mobile-first,” which is what designers say when they prioritize mobile-sized screens for their design, ensuring it works well on phones and other small screens in addition to anything larger. It will automatically scale and reorganize elements as needed for different screen sizes.
  • “Modern” — Bulma leverages a variety of “modern” CSS features that have been added to the CSS specifications and implemented in browsers more recently. These have been built on top of the experiences designers had with earlier CSS versions over the years, and so they enable flexible designs with smaller, simpler code.
  • “Easy” — We can add one line to an HTML file to use Bulma, and it can be customized with a few more lines if desired.

Learning Bulma

Bulma’s official documentation is both a good starting point and a place to return frequently as you use the framework.

First, orient yourself with:

  1. the overview (note the starter template!),
  2. general syntax for using its components and styles, and
  3. basics of columns plus how columns are responsive. This covers one of the most visible aspects of responsive design: columns that are arranged horizontally on wider screens automatically become vertically stacked on smaller devices.

With a few of those fundamentals covered, it’s time for a good tutorial. Most of what you’ll find searching for “Bulma tutorial” is not particularly good, but this video tutorial series does a good job. Watching the whole series will prepare you very well. For this class, watch at least:

  • #1 - Intro & Setup
  • #2 - Fonts & Colours
  • #3 - Spacing & Containers
  • #7 - Grid Columns
  • #11 - Buttons
  • #14 - Form Fields

Finally, return to the official documentation to skim through the pages in the following four sections. The goal is to be aware of the parts and pieces Bulma provides so that you know what it is capable of. You can return to the documentation to look up the details at any time, but you need to know what is there first:

  1. Elements — “Essential interface elements that only require a single CSS class”
  2. Components — “Advanced multi-part components with lots of possibilities”
  3. Form — I think of these as recipes I can follow any time I am designing a form.
  4. Layout — Important pieces for designing of the structure (high-level layout) of a page.

Using Bulma

When looking up how to accomplish something with Bulma, always start with the official documentation. A general web search for Bulma topics tends to pull up low-quality or even misleading resources. The official documentation is clear, it has good examples, and its built-in search works well. If you’re not sure what exactly to search for, a quick skim through the four important sections linked above can often find something relevant quickly.

JSFiddle or other web-based prototyping tools provide a simple way to quickly try out new things and figure out how to use them. Bulma can be added to any JSFiddle document as a “Resource” (paste the CSS URL from the “Use a CDN” option in Bulma’s Installation page).

Courses:
modified: