the-official-bulma-book.html

---
fulltitle: The official Bulma book
title: A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.
layout: default
route: the-official-bulma-book
---

{% capture hero_more %}
<a class="button is-bleeding" href="{{ site.data.meta.book_url }}" target="_blank">
  <span class="icon">
    <i class="fas fa-shopping-cart"></i>
  </span>
  <strong>Buy now</strong>
</a>
{% endcapture %}

{% capture buy_buttons %}
<div class="buttons is-centered">
  <a class="button bd-fat-button is-bleeding is-medium"
     href="{{ site.data.meta.book_url }}"
     rel="nofollow"
     target="_blank">
    <span class="icon">
      <i class="fas fa-file-pdf"></i>
    </span>
    <span>
      <small>PDF + Epub + Mobi</small>
      <strong>Buy</strong> from <img src="{{ site.url }}/images/book/bleedingedge-type.png" width="167" height="14">
    </span>
  </a>

  <a class="button bd-fat-button is-amazon is-medium"
     href="{{ site.data.meta.book_amazon }}"
     rel="nofollow"
     target="_blank">
    <span class="icon">
      <i class="fab fa-amazon"></i>
    </span>
    <span>
      <small>Kindle version</small>
      <strong>Buy</strong> from <img src="{{ site.url }}/images/book/amazon-logo.png" width="80" height="24">
    </span>
  </a>
</div>
{% endcapture %}

{% capture body_content %}
<p>This book is a step-by-step guide that teaches you how to build a web interface from scratch using the popular Bulma framework.</p>
<blockquote>
  <p><em>"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."</em></p>
  <p>- Samantha Baita, UX/UI Designer</p>
</blockquote>
<blockquote>
  <p><em>"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."</em></p>
  <p>- Stanley Eosakul, Full-Stack Web Developer</p>
</blockquote>
<p>By the end of this book, you will understand:</p>
<ul>
  <li>How to create layouts with Bulma</li>
  <li>How components in Bulma work</li>
  <li>How to combine them to design specific elements for your UI</li>
  <li>How to extend them with your own setup</li>
</ul>
<p>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)!</p>
{% endcapture %}

{%
  include docs/elements/banner.html
  color="bleeding"
  title="<span>The official Bulma <strong>book</strong></span>"
  more=hero_more
%}

<header class="bd-single-header">
  <div class="container is-max-desktop">
    <div class="bd-single-titles">
      <h1 class="title">
        Creating interfaces with Bulma
      </h1>
      <p class="subtitle">
        By Jeremy Thomas, Oleksii Potiekhin, Mikko Lauhakari, Aslam Shah, David Berning
      </p>
      {% include book/book-cover.html %}
      {{ buy_buttons }}
    </div>
  </div>
</header>

<div class="bd-single-body bd-is-last">
  <div class="container is-max-desktop">
    <div class="bd-single-content content">
      {{ body_content }}
      {{ buy_buttons }}
    </div>
  </div>
</div>