Bulma Building Blocks allows you to generate websites using snippets based on the Bulma CSS Frameworks.

Usage no npm install needed!

<script type="module">
  import bulmabuildingblocks from 'https://cdn.skypack.dev/bulmabuildingblocks';


GitHub package.json version Documentation Maintenance

Bulma Building Blocks is a lightweight library of responsive HTML snippets based on Bulma framework and design.


  • Keep your current Bulma theme / variables easily
  • Very lightweight with none internal dependencies aside from Bulma


Browse online documentation here.

Getting Started

Use the Builder



Using CDN or downloading files to serve local

  • The css file comes with Bulma and Bulma Building Blocks.


Just download or use the CDN:


Using npm

Install the npm package

npm install bulmabuildingblocks

Look at the below example of how to import using npm

// Bulma Building Block
@import 'bulmabuildingblocks';

Look at the below example of how to import into an existing Bulma project using npm, you can leave out the variable file if you don't want the same configuration as Bulma Building Blocks

// Bulma Building Block variables
@import 'bulmabuildingblocks/src/initial-variables';

// Bulma
@import 'bulma/bulma';

// Bulma Building Block
@import 'bulmabuildingblocks/src/main';

Use the skeleton

Use the template below as a starting point, copy the html snippets into the recommended area.

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bulma Building Block</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/bulmabuildingblocks@0.5.6/dist/bulmabuildingblocks.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
     <!-- Insert the html blocks here. -->


Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Core Team

Joseph Anson

Copyright and license

Code Copyright 2020 Joseph Anson. Code released under the MIT license.