Bulma CSS Tutorial

Here’s a video playlist on Bulma CSS framework. It’s similar to Bootstrap but doesn’t have any JS dependencies. It’s also simpler than Bootstrap.

I watched part of it and it seems good. I’d set it up a different way than in the first video though, so you can use Bulma’s SCSS variables.

To try it, run these commands in a new project directory:

$ npm init -y
$ npm install -D parcel-bundler
$ npm install -S bulma

Then create a directory called src with two files:

  • src/index.html
  • src/styles/main.scss (this is in a subdirectory named styles)

Copy this into the index.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>hello world</title>
        <link rel="stylesheet" href="./styles/main.scss" />
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">hello world</h1>
                <p class="subtitle">welcome to the site</p>
                <p>
                    Ipsum exercitationem optio consectetur ab quasi consectetur,
                    vero voluptatem Quia numquam tempore totam magnam impedit
                    Eius ad molestias atque delectus nesciunt Officiis voluptate
                    nesciunt delectus debitis odit? Dolor doloribus aperiam.
                </p>
            </div>
        </section>
    </body>
</html>

Add this line to the main.scss file to import Bulma’s sass file from the node_modules directory that was created by the commands at the top of this post:

@import "~bulma/bulma.sass";

In the package.json file, add a “start” script in the “scripts” section like this:

    "scripts": {
        "start": "parcel serve src/index.html"
    },

Then type npm start and visit localhost:1234 to view the site. It will live reload, and you can use all the features of Bulma including customization with SCSS variables. :slight_smile:

The HTML I posted above should start out looking like this:

Here’s the playlist: