What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Buy Now

Creating Interfaces with Bulma

Chapter 1. Introduction

There are few reasons why Bulma is different than other CSS frameworks:

modern: All of Bulma is based on CSS Flexbox
100% responsive: Bulma is designed to be both mobile and desktop friendly
easy to learn: Most users get started within minutes
simple syntax: Bulma makes sure to use the minimal HTML required, so your code is easy to read and write
customizable: With over 300 SASS variables, you can apply your own branding to Bulma
no JavaScript: Because Bulma is CSS-only, it integrates gracefully with any JS framework (Angular, VueJS, React, Ember, or just plain Vanilla JavaScript)

Simple columns system

Bulma is mostly famous for its straightforward columns architecture:

<div class="columns">
  <div class="column">
    <!-- First column -->
  </div>
  <div class="column">
    <!-- Second column -->
  </div>
</div>

That’s it! It only takes two classes (columns for the container, column for the child items) to have a set of responsive columns. You don’t have to specify any dimensions: both columns will each take 50% of the width automatically.

If you want a third column, just add another column:

<div class="columns">
  <div class="column">
    <!-- First column -->
  </div>
  <div class="column">
    <!-- Second column -->
  </div>
  <div class="column">
    <!-- Third column -->
  </div>
</div>

Each column will now take up 33% of the width. No additional change is required! Continue this and put as many columns in as your want. Bulma will automatically adjust the size.

Readability

Bulma is easy to learn because it’s easy to read. For example, a Bulma button simply uses the class name button.

<a class="button">
  Save changes
</a>

To extend this button, Bulma provides modifier classes. They exist only as a way to provide the base button with alternative styles. To make this button use the primary turquoise color, and increase its size to large, just append the classes is-primary and is-large.

<a class="button is-primary is-large">
  Save changes
</a>

Tip: You might want to stick with the “primary”, “secondary” naming conventions. This will help give some meaning to your styles and it leaves it open for customization down the road.

Customizable

Bulma has more than 300 variables, making almost any value in Bulma easy to override, allowing you to define a very personalized setup.

By using SASS, you can set your own initial variables, like overriding the blue color value, or the primary font family, or even the various responsive breakpoints.

// 1. Import the initial variables
@import "../sass/utilities/initial-variables"
@import "../sass/utilities/functions"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb

// Add pink and its invert

$pink: #ffb3b3
$pink-invert: #fff

// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert

// Use the existing orange as the danger color
$danger: $orange

// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

Each Bulma component also comes with its own set of variables:

box has its own shadow
columns have their own gap
menu has its own background and foregroud colors
button and input have colors for each of their states (hover, active, focus…)
etc.

Each documentation page comes with the list of available variables to override.

Modular

Because Bulma is split into dozens of files, it’s easy to only import the parts you actually need.

For example, some developers only want the columns. All they have to do is create a custom SASS file with the following code:

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

This will only import the columns and column CSS classes.

Description

Bulma is a lightweight configurable CSS framework that handles all the hard work of Flexbox for you. Bulma makes creating web interfaces an easy and interesting job. This book begins with an overview of the basics of Bulma ? its terms and its concepts. Then, while designing a login page for your application, you’ll learn how to use the various tools provided by Bulma to create HTML forms and control their layout and flow. In the later chapters, you’ll design an admin area for your application, thus learning to use Bulma’s navigation and menu components. You will also add the components to your user interface for common things such as boxes, lists, and media groups, and then create pagination. As you progress through the book, you’ll create and layout some other components for your interface, including tables, design dropdown lists, and finally to integrate your web application with JavaScript. By the end of this book, you’ll be able to use the features of Bulma to your advantage and build web interfaces quickly and easily.

What you will learn

Create different layouts that contain menus, navigations, and other elements Work with the various components of Bulma Design specific elements for your web interface Create breadcrumbs and file upload fields Extend components with your own set-up Use navigation and menu components to build the admin area of your app

What do you get with eBook?