Creating Interfaces with Bulma

By Jeremy Thomas , Oleksii Potiekhin , Mikko Lauhakari and 2 more
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Free Chapter
    1. Introduction
About this book

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.

Publication date:
November 2019
Publisher
Packt
Pages
194
ISBN
9781800209374

 

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.

 

Summary

With this overview under your belt it is now time to look at some of the main terminology used in Bulma.

About the Authors
  • Jeremy Thomas

    Jeremy Thomas has been a web designer for more than 10 years. While studying graphic design in France, he discovered CSS during an accessibility class and instantly fell in love with the language. That’s when he decided to make a career out of it. He has worked with eCommerce companies, agencies (Sony, Microsoft, Louis Vuitton, freelancing, tech startups, code teaching). By the beginning of 2016, Jeremy had developed a small framework that he was using himself for kickstarting his projects, and decided to share it for free to the world: Bulma was born. Still active in the open-source community, he has launched other useful web resources like MarkSheet, CSS Reference, HTML Reference, and Web Design in 4 minutes. His goal is to continuously share the knowledge he acquires through his daily work.

    Browse publications by this author
  • Oleksii Potiekhin

    Oleksii Potiekhin is a web developer by profession and by destiny with more than nine years of production experience in developing and designing GUIs on different platforms and technologies. He has worked with: Volvo, Scania, Volkswagen, Renault, John Lewis Partnership, Thomson Reuters, etc. He fell in love with Bulma in 2017 because it provides everything you need to build a modern UI for any kind of project.

    Browse publications by this author
  • Mikko Lauhakari

    Mikko Lauhakari is a developing web-creative, or just simply a web nerd. He’s had a passion for the web since the last bubble burst. With a background in web programming studies at Kalmar University, Sweden, he has a wide knowledge base of different programming languages.

    Browse publications by this author
  • Aslam Shah

    Aslam Shah is a Senior JavaScript Developer at Risk Ident GmbH. He has 5+ years of experience in developing front-end interfaces for small to large-sized companies and believes that technology never stops evolving and that we have to learn new things every single day to keep ourselves up to date; we shouldn’t be scared of moving from old things to new ones.

    Browse publications by this author
  • Dave Berning

    Dave Berning has been a front-end web developer for more than six years. He graduated from the University of Cincinnati with a Bachelor of Fine Arts (B.F.A) in electronic media. During his tenure as a UC Bearcat, he learned to create interactive websites with HTML, CSS, and JavaScript. In addition to his B.F.A., Dave has several awards and recognitions from his peers and co-workers. Dave currently builds rich progressive web applications with Vue.js for Drees Homes; a home builder located in Greater Cincinnati. He is also a contributing writer for Alligator, LogRocket, and ButterCMS. In June 2017, Dave started organizing the CodePen Cincinnati meetups where he lectures and leads workshops about the latest technologies in the field.

    Browse publications by this author
Creating Interfaces with Bulma
Unlock this book and the full library FREE for 7 days
Start now