Code Self Study Forum

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">
        <meta charset="UTF-8" />
        <title>hello world</title>
        <link rel="stylesheet" href="./styles/main.scss" />
        <section class="section">
            <div class="container">
                <h1 class="title">hello world</h1>
                <p class="subtitle">welcome to the site</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.

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: