Press "Enter" to skip to content

Creating Interfaces with Bulma

BEP_Creating-Interfaces-with-Bulma3_150

 

 

$22.99 U.S.
ISBN: 978-1-939902-49-8
190 pages
Published January 2018

Creating Interfaces with Bulma:

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin, Mikko Lauhakari, Aslam Shah, David Berning

"This book is significantly useful because it allows you to create an interface from scratch. There are resources about other frameworks, but they are more theoretical and say a lot of singular concepts without allowing you to practice creating an entire website interface."

- Samantha Baita, UX/UI Designer

"This book is much more useful and more interesting than other resources as it builds an impressive administration website interface (a final project) and explains how to add functionality to native components using JavaScript. I learned a lot about the elements and components of the Bulma framework and how to integrate them together."

- Stanley Eosakul, Full-Stack Web Developer

This book is a step-by-step guide that teaches you how to build a web interface from scratch using the popular Bulma framework.

By the end of this book, you will understand:

  • How to create layouts with Bulma
  • How components in Bulma work
  • How to combine them to design specific elements for your UI
  • How to extend them with your own setup

This book also shows you how Bulma can be integrated with JavaScript through frameworks like Angular, React, VueJS, or simply with Vanilla JS. This book is for any designer or developer interested in understanding how to use Bulma, and how to use Bulma’s components and layout system to create their own web interface. Even if you are not already familiar with Bulma, it only takes a few minutes to get acquainted with the framework. You only need to have an understanding of how HTML and CSS work, but you don’t need an in-depth knowledge because Bulma’s purpose is to avoid writing CSS! With over 24,000 stars on GitHub and counting, Bulma is a modern CSS framework that has garnered a large adoption rate in recent months within the open source community. There are few reasons why Bulma is different from other CSS frameworks. It is modern: all of Bulma is based on CSS Flexbox. It is 100% responsive: Bulma is designed to be both mobile and desktop friendly. It is easy to learn. It has simple syntax: it uses the minimal HTML required, so your code is easy to read and write. It is customizable: with over 300 Sass variables, you can apply your own branding to Bulma. There’s no JavaScript: because Bulma is CSS-only, it integrates gracefully with any JS framework (Angular, VueJS, React, Ember… or just plain JS)!

Table of Contents
CHAPTER 1: Understanding Bulma, terminology, and concepts

  • CHAPTER 2: Creating and controlling forms with Bulma
  • CHAPTER 3: Creating navigations and vertical menus
  • CHAPTER 4: Creating responsive grids with common components
  • CHAPTER 5: Creating breadcrumbs and file upload fields
  • CHAPTER 6: Creating tables and selecting dropdown
  • CHAPTER 7: Creating more tables and selecting dropdowns
  • CHAPTER 8: Creating notifications and cards
  • CHAPTER 9: Using Bulma with Vanilla JavaScript
  • CHAPTER 10: Using Bulma with Angular
  • CHAPTER 11: Using Bulma with Vue
  • CHAPTER 12: Using Bulma with React
  • CHAPTER 13: Customizing Bulma

Foreword by Jeremy Thomas: My Bulma journey

I discovered CSS almost by accident in 2007. During an accessibility class, the teacher was emphasizing the need to separate content from styling, and told us it could be achieved with CSS. It was a breakthrough for me: no need for Dreamweaver and complex table layouts anymore. I could write in a simple language that would translate my rules into visual interactive interfaces. I didn't know this event would eventually define the start of my career as a web developer.

For the next 10 years, while I would teach myself various web development tools (PHP, JavaScript, Ruby, Node...), CSS would remain my strongest skill, and the reason why clients and companies would hire me. In the meantime, new CSS features were being developed and adopted by browsers. I was already pretty happy with shadows, rounded corners, custom fonts, and gradients, since they didn't require PNG hacks or convoluted workarounds anymore. But by the end of 2015, a new layout model was becoming increasingly popular. It was called Flexbox.

Flexbox was a game changer: instead of relying on floats, clears and a complex markup to define columns, you could define a Flexbox container with automatically resized columns and you had yourself a grid system! This solution would also drastically simplify the HTML markup. I knew Flexbox could be used to develop something new, something powerful, something exciting! But I didn't know what exactly.

By the time I'd discovered Flexbox, I was already using a small Sass framework I'd built and maintained myself over several months. I used it to kickstart various CSS projects, both personal and professional. Flexbox turned out to be the missing piece: the main appeal of a CSS framework is to simplify the process of defining page layouts, and Flexbox's syntax was the perfect candidate for a clearer and more flexible markup. While Bulma was initially a CSS generator I was working on that was making use of "capsules" (hence the name) as modular components, I decided to ditch the idea completely and rather combine my Sass framework with my recent Flexbox knowledge into a new modern CSS framework. Bulma was born.

Since I've always been an open source advocate, I decided to post my small framework on GitHub and share it across various tech and social websites. I thought "If this small framework I built solves a problem of mine, there's a chance it might solve a problem for someone else too." While the initial launch was really quiet, it suddenly went viral. Bulma was trending on GitHub, reached the Hacker News and Product Hunt homepages, and was shared hundreds of times via Twitter. I realized I had built something not only interesting, but actually useful. I remained cautious though. Maybe Bulma's popularity was only a sudden burst of excitement that would fade away soon. But it did not.

Two years into the project, Bulma has been starred 24,000 times on GitHub, and downloaded or installed more than 1 million times. 150 contributors have helped close 860 issues and merge almost 300 pull requests. It shows how the open source community can turn a small CSS project into a major asset for web developers. And considering how it spawned gorgeous websites and made lots of businesses thrive, there is no question that Bulma will continuously grow and remain a widely used tool in the future.

I've acquired a lot of knowledge in the process, whether it's new CSS techniques or better writing skills. I've also seen many fans express their love for Bulma, praising its simplicity and ease of use. But I think the best reward for me is to know that I've been able to help thousands of people make the web a place of their own.

Jeremy Thomas