Getting Started with Bulma - An Introduction to the CSS Framework

Bulma

Bulma is a free and open source frontend CSS framework based on Flexbox. It contains HTML and CSS-based design templates for typography, forms, buttons, tables, grid systems, navigation and other interface design elements.

Features

  • 100% Responsive.
  • Modular.
  • Modern.
  • Free (Source code on GitHub).
  • growing community.
  • Easy to learn.
  • Quick Customization.
  • No JavaScript Required

Getting started

There are three ways for you to start using Bulma. You can use npm to install the Bulma package (recommended), you can link the Bulma stylesheet via CDN or you can clone the GitHub repository of Bulma to get the latest development version.

Using NPM

Just type the following in your terminal:

$ npm install bulma

Using a CDN

Take one of the links from this page and embed them in your project.

Get Started

There are several ways to get started with Bulma.

  • Installing the Bulma package with npm
  • Using a CDN to link to the Bulma stylesheet.
  • Use the GitHub Repository to get the latest development version.
  • Using npm
$ npm install bulma

Code requirements

For Bulma to work correctly, you need to make your webpage responsive.

  1. Use HTML5 doctype
<!DOCTYPE html>
  1. Add the responsive viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. Starter Template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
  <h1 class="title">
    Hello World
  </h1>
  <p class="subtitle">
    My first website with <strong>Bulma</strong>!
  </p>
</div>
</section>
</body>
</html>

Bulma-start

bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma.